Distance between Header and paragraph – how to decrease

  • Author
  • #1216124


    Is there a way to adjust the vertical space between the header lines and the body of text (paragraph) beneath.

    Thanks in advance :)

    (Yes I have the CSS customize upgrade)

    The blog I need help with is manligblog.com.


    The site you reference is set to private, so we volunteers cannot see it. At the very least we need to know which theme you are using, but it would be very helpful to see an example so that we can get the code right. Can you temporarily set your site to public and point us to an example?



    Thanks thesacredpath,
    Standard Twenty Twelve, Standard vertical distance between Header 2 and paragraph.
    (For the time, I have some pictures for whom I am awaiting permission to use -better to keep private).


    To make sure I’m giving you the right stuff, can you take a look at the demo site for twenty twelve, http://twentytwelvedemo.wordpress.com/ , and point me to an example?



    Yes TSP (if I may call you so),
    The vertical distance between “Welcome to our website …” and “One morning … “
    (I’m talking about the page at http://twentytwelvedemo.wordpress.com/ )


    Ah, now we’ve got it, and yes you can call me TSP. Add this and adjust the bottom margin value as desired.

    .entry-header {
    margin-bottom: 1.71429rem;


    Yeah – English isn’t my first language, so I am probably not using the correct terms. Sorry about that.

    So what will the equivalent code be for headings (h2 for example)

    .entry-?? {
    margin-bottom: 1.71429rem;


    .entry-header is the parent selector for both h1 and h2 page and post titles, so setting that will do both.



    Not working in my example,
    Check out http://twentytwelvedemo.wordpress.com/2012/03/25/hello-world-2/
    The h2 “Teeming Valley” is equidistant to text above and beneath, which I find visually suboptimal.
    My goal is to get “Teeming Valley” closer to the text beneath.

    Is the code still the same for the example above TSP ?


    That is h2 with a post/page. To change that, you would need to adjust here:

    .entry-content h1, .comment-content h1, .entry-content h2, .comment-content h2, .entry-content h3, .comment-content h3, .entry-content h4, .comment-content h4, .entry-content h5, .comment-content h5, .entry-content h6, .comment-content h6 {
    margin-bottom: 1.71429rem;
    margin-top: 1.71429rem;

    The above would adjust all h* top/bottom margins (h1 to h6) within content.



    That gives me a lot or Warnings like:
    Heading (h1) should not be qualified
    Heading (h2) should not be qualified – and so on.
    Heading (h1) has already been defined
    Heading (h2) has already been defined – and so on.

    I know it isn’t your job to write my code here.
    So do you have some in depth CSS info – I used to write Pascal, C, C# etc. so I will manage if you point me in the right direction.


    Don’t worry about the warnings. Sometimes the CSS editor is a little overzealous in its warnings. The selectors were pulled directly from the existing CSS, so to make sure things work correctly and overwrite the original, we need to use those selectors as is.



    Thanks for your patience and kindness TSP – that code worked fine.


    You are welcome.

The topic ‘Distance between Header and paragraph – how to decrease’ is closed to new replies.