Search code examples
htmlcsshtml-headingheading

What is the reference property for a heading margin declared using rem?


The font-size of the body is 18px.

My headings are all declared as rem values. I want to have margin-bottom as big as the line-height of each heading and margin-top twice as big as the line-height of each heading.

I thought I could achieve this by also using rem for the margins, but I actually don't know what root value is used for the margins of headings when you use 1rem. I'm getting 16px now.


Solution

  • rems are relative to the base font size which would be the font size set on the HTML element (usually 16px by default). It's generally advised to set the font size of the HTML element as a percentage to allow the user to set a font scaling setting in their browser for accessibility purposes. I personally tend to use font-size: 62.5% as that lets you think about rem units as px / 10 so 1.6rem would equal 16px assuming the user has their browser font size set to 16px.