Site logo

Archived topic

How to increase margin / padding before H2-H6 headings in single blog posts?

5 replies · Started by crosby87 on May 12, 2021

Viewing posts 1–6 of 6

Hi there,

I would like to increase my margin before headings H2-H6 in single blog posts. I cannot do it from the customiser because then margin of the paragraphs also change.

Hi there,

Can you link us to the site in question? and perhaps specify which heading tags you want to target?

If it's password-locked, can you provide the credentials as well? So we can inspect the page as we may have to do a custom CSS writeup.

You can use the private information text field for the details. Thank you. :)

Hi,

Sure. I would like to target H2-H6 headings within all single blog posts.

You can try this CSS:

body.single-post h2{
    font-size: 36px;
}

body.single-post h3{
    font-size: 30px;
}

body.single-post h4{
    font-size: 24px;
}

body.single-post h5{
    font-size: 18px;
}

body.single-post h6{
    font-size: 12px;
}

This selects ALL the specified heading within the single post pages.

Thanks, but this increases the font size right? I would like to increase the margin/padding before these headings.

Ah yes that's just an example property. You can add more like margin and padding.

Example:

body.single-post h2{
    margin-top: 20px;
margin-left: 30px;
}

You can do this for the rest of the headings as well.

Note if you want to every heading to have the same CSS properties applied to them you can do it like this:

body.single-post h2,
body.single-post h3,
body.single-post h4,
body.single-post h5,
body.single-post h6{
    margin-top: 20px;
    margin-left: 30px;
}
This archived topic is closed to new replies.