I’m in the process of creating a simple static small business site but am having difficulty with the large amount of space between my header image and menu bar and the body of the front page. It was fine until I added a hyperlink to the first h1 and photo in my body text. Now, when I’m creating the page and typing things in, if I delete the space it removes the hyperlink for all of my h1 titles and photos. You can see on the site that I have 4 photos linked with 4 headings that I want to click through to their own pages. But there’s a huge gap between the header/menu bar and my body. Also, with each hyperlink I add on the photos and h1 text it messes with the spacing between them so that I can’t get consistent spacing. And again if I delete the lines there it removes the hyperlink. It seems like it would be more than just a padding issue if it’s giving me such inconsistent spacing not only between the header and body, but also between each hyperlink within the body.
Any suggestions would be greatly appreciated!
Or you could try using a browser developer tool for this kind of exploratory CSS work.
I used Google Chrome’s built-in Developer Tool just because I find it particularly easy to expose underlying HTML and CSS as compared to Firebug.
Now that you know the style, from being exposed/added by the Developer Tool, you can add a new style to override it.
You ought to add new styles externally, not within the theme’s files. Changes to the theme’s files will compromise the theme and be compromised when the theme updates.
External changes can be made using a Child Theme or through a plugin that provides Custom CSS functionality.