DEV Community

Cover image for CSS Units
Ayu Adiati
Ayu Adiati

Posted on • Updated on • Originally published at adiati.com

CSS Units

Hello Fellow Codenewbies 👋,

There are many factors to consider when we think about responsiveness in CSS.
One of them is CSS Units.

There are two types of units:

  1. Absolute
  2. Relative - to the size of font (em, rem, etc.) and viewport (vh, vw, etc.)

Absolute Unit

Regardless of its parent's or screen size, absolute units are always the same size.
px, cm, inch, etc. are within this category.

<body>
  <div class="absolute"></div>
  <div class="relative"></div>
</body>
Enter fullscreen mode Exit fullscreen mode
.absolute {
  background-color: green;
  width: 640px;
  height: 100px;
}

.relative {
  background-color: red;
  width: 90%;
  height: 6em;
}
Enter fullscreen mode Exit fullscreen mode


Try to shrink and expand the window and see the difference in the above example.

Relative Unit

Percentage

The percentage is mainly used for widths, and it is relative to the target element's parent.

<body>
  <header>
    <h1>Hello World</h1>
  </header>
</body>
Enter fullscreen mode Exit fullscreen mode
header {
  width: 80%;
}

h1 {
  width: 50%;
}
Enter fullscreen mode Exit fullscreen mode

In the above example, the width of the header is 80% of the body.
And the width of h1 is 50% of header.

em

em inherits size from its parent.

<div class="container">
  <h1>Hello World</h1>
</div>
Enter fullscreen mode Exit fullscreen mode
.container {
  font-size: 12px;
}

h1 {
  font-size: 2em;
}
Enter fullscreen mode Exit fullscreen mode

The font size of h1is 2x its parent (container), making it 24px.

But there is one problem with em.
Because it is relative to its parent, it can create a cascading effect.

Click the CSS button on the CodePen to see the code.
As you can see in the result, the fonts of li are bigger than h1. But their font size is smaller than h1.
How does this happen?

Let's break them down.

  • We set the font size of body as the parent of h1 and ul to 18px.
  • Then we set the font size of h1 to 2em. It now makes the font size of h1 twice bigger than body.
  • Let's leave h1 and move to its sibling, ul. We set its font size to 1.5em. As you can guess, the size of the ul is now 1.5x bigger the parent.
  • Then we set the font size of li to 1.5em. It makes li now 1.5x bigger than ul. Remember that ul is already 1.5x bigger than body. So, li is 3x bigger than its grandparent, the body.

When it's about font-size, we better avoid the use of em and use rem instead.

rem

rem stands for "root element," and it is always relative to the "root" of the document, which is the html element.

Because we use rem, even though the font size of body is 50px, all font size is changed relative to html as the root element.

Picking Which Unit To Use

It depends on your personal preference and what you need, but here is a reference of approaches on when to use one:

  • font-size: rem
  • margin and padding: em
  • width: em or percentage or absolute unit such as px

Thank you for reading!
Last, you can find me on Twitter. Let's connect! 😊

Top comments (8)

Collapse
 
mallockey profile image
Josh Melo

Great article, been trying to wrap my head around this for awhile and this was nice and concise. Question so just to make sure I understand REM is like EM except child containers only base their sizes on the root document? Is that always html?

Collapse
 
adiatiayu profile image
Ayu Adiati

Thank you for reading and for the feedback, Josh.
And I'm happy if it could help you 😊

Yes, with rem (root em), children base their size on the root element.
And the root element is always html.
You can find the explanation here

[...] it is also referred to as the root element

I hope this helps 🙂

Collapse
 
nicolasomar profile image
Nicolás Omar González Passerino

Nice article. Simple to understand and well explained.

Collapse
 
adiatiayu profile image
Ayu Adiati

Thank you! I'm glad go hear that 😊

Collapse
 
fadliselaz profile image
fadliselaz

Terimakasih mba Ayu..

Collapse
 
adiatiayu profile image
Ayu Adiati

Sama-sama, mas Fadli

Collapse
 
nazanin_ashrafi profile image
Nazanin Ashrafi

Pretty helpful article. Thank you 🙌🌹🌹

Collapse
 
adiatiayu profile image
Ayu Adiati

Thank you for reading!