It looks to me that you are using bold text to emphasise your headers.
Maybe you should try using the header option in the editor and pehaps set that heading text as Header 3?
On the ‘Details’ page I am using Header 3 for the headers, I did use bold text for another page as it made it look nicer not having such a big gap.
div#page-container > h3 {
margin-bottom: 5px;
}
That CSS rule should reset the bottom margin to 5px. You can use whatever value you wish.
If your theme does not have the facility to add custom CSS you can use a plugin to do that. If you don’t want to use a plugin you should do it using a child theme. If you try to alter the themes files directly you will lose any edits if the theme is updated.
Thank you very much that works!
Is it possible to alter that to be page specific? So I can have different sized margins on different pages for Header 3?
Each page will have its own ID which will be shown as a class on the <body> element like this:
<body class="page page-id-108 page-template-default">
Therefore:
.page-id-108 div#page-container > h3 {
margin-bottom: 5px;
}
will only apply to the Spa page.
You can see the body element if you use your browser tool or a Firefox plugin like Firebug to inspect the code.