[Confluence Cloud] Using macro "Style" changed the page margin

[Ravia Xu]

Hi, I was trying to use macro "Style" to change the font size of H5 and H6 since the default from Confluence is too small. It is smaller than the body font size, I still don't understand why.

So I added the macro to the page, and put these styles:

.wiki-content h5 { margin-top: 1em; margin-bottom: .1em; font-size: 1.0em;}
.wiki-content h6 { margin-top: 1em; margin-bottom: .1em; font-size: 1.0em; text-transform: capitalize;}

I managed to get the size that I wanted, however, it changed the margin of my page. Do you know why and how to fix it? I am not familiar with CSS, if there is a better solution to manage the style, please tell me. I will really appreciate it, Thanks.

[Shannon S]

Hello Ravia,

Sorry to hear you're having trouble getting your CSS to work. Happy to help!

In your example, besides changing the font size, you are requesting the top margin change 1x the current size, and the bottom one 1/10th the current size. (refer to CSS units if you are unsure.) You can see this in your CSS below:

.wiki-content h5 { margin-top: 1em; margin-bottom: .1em; font-size: 1.0em;}
.wiki-content h6 { margin-top: 1em; margin-bottom: .1em; font-size: 1.0em; text-transform: capitalize;}

If you don't want to change the margins, then you just need to remove that information from your CSS.

If you only want to change the font size, then you don't need to include those extra parameters. Have a look at CSS font-size Property for more information on that.

You can switch from using "em" to measure, if you prefer pixels, or a percentage. The CSS units article I shared should be able to help you with that if you have any trouble!

Take care,

Shannon