If you are reading this, I’m pretty sure you know at least 5 ways of centring HTML elements using CSS. So, 15 options for relative sizing shouldn’t come as a surprise to you. Let me tell you, some of them are bizarre.

The story

I saw this tweet by JavaScript Teacher, I only knew 5–7 of these properties and it gave me a massive FOMO attack. So, I decided to write this article and save you from the FOMO.

What are relative units & why do we need ‘em?

Have you ever wondered that none of the screens you own have the same sizes & dimensions? But they all do display webpages. So the webpages need to by styled in a way that adapts in relative proportions to the display (or any other HTML element).

In short, making such responsive, adaptive layouts gracefully possible.

See this cool GIF by Karol Podleśny https://dribbble.com/shots/1277779

1. the unpredicatble em

Relative to the font-size of the current element ( 2em means twice the current font-size). A length property dependent on font-size, yep how magical.

.post {

font-size: 24px;

border-left: 0.25em solid #4a90e2;

} /* The border-left-width will compute to 6px . */

Working with em can get tricky as it gets it’s value relatively from its parent element. In case of nested elements, it gets messy when the parent has em value too.

2. the savior rem (root em)

Just like em but relative to the font size of the root element of the document.

p {

margin-left: 1rem;

} h4 {

font-size: 2rem;

} /* Unlike the em, which may be different for each element, the rem is constant throughout the document */

For this technique, it is fundamental to set your base font-size, by browser default usually this is 16px.

3,4. vh and vw

Unlike em and rem which are dependent on font size vh & vw are dependent on the size of the viewport.

1vh = 1% or 1/100th of viewport height

1vw = 1% or 1/100th of viewport width

You may have seen some sites with typography that scales beautifully as you resize your browser window, vw & vh make it happen.

5,6. vmax & vmin

Viewport max and viewport min: 1vw or 1vh, whichever is bigger or smaller respectively.

1vmax = 1% or 1/100th of the bigger value between 1vw or 1vh

1vmin = 1% or 1/100th of the smaller value between 1vw or 1vh

7. %

Quite popular, everyone’s friend & fairly obvious % is relative to it’s parent element.