DEV Community

Cover image for Css Units
Marcos Rafael
Marcos Rafael

Posted on • Updated on

Css Units

Let's briefly learn about CSS units!

px (absolute)

Avoid using 'px' for font-size. Use for small details, like shadow or borders.

% (relative)

Good to use for layouts and width/height.

  • size is defined as percentage of the value of the mostly parent element.
.example {
font-size: 20 px;
line-height: 50%; /* 10px */
}
Enter fullscreen mode Exit fullscreen mode

em (relative)

Can be used for font-size and margin/padding. This will adjust this properties based on that element's font size.

  • changes behavior based on property
  • 'em' = parent font-size
  • if parent don't have a size, defaults to 16px (body)
.parent-div {
font-size: 10px;
}
Enter fullscreen mode Exit fullscreen mode
.list-item {
font-size: 2em; /* 10px * 2 or 20px */ 
}
Enter fullscreen mode Exit fullscreen mode

Rem (relative)

You can also use 'rem' for font-size and margin/padding. 'rem' is easier to work with than 'em', because it's more consistent.

  • Relative to hoot HTML, no matter what(default is 16px)
  • You can change the root HTML size. For example, if you change it to 20px, 1 'rem' will always be 20px.
html {
font-size: 10px;
}
Enter fullscreen mode Exit fullscreen mode
p{
font-size: 1.5rem;
}
Enter fullscreen mode Exit fullscreen mode

Here we've set the HTML default size to 10px. So, 1.5 rem is 15px. 2rem will be 20px instead of default 32px.

vw/vh (relative)

ww/vw are relative to the width/height of the browser window. 100vw means full width of the screen. Use vw/vh for bigger layouts, like background.

  • very useful for responsive websites because everything scales.

ch (relative)

'ch' is relative to the width of the number 0 of the current font.'ch' is used to size the width of a paragraph. In general, you want a 45-70 character wide column for readability.

  • You would use it like this:
  • max-width: 20ch;

This set the width of the column to a maximum of 20 characters per line.

this is hard to remember, so...

Like and Save this post

credits to Sai Pranay for the inspiration.

Top comments (0)