Css Units

Marcos Rafael — Sun, 01 May 2022 15:59:53 +0000

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 */
}

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;
}

.list-item {
font-size: 2em; /* 10px * 2 or 20px */ 
}

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;
}

p{
font-size: 1.5rem;
}

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.

Test for Github workflow

Marcos Rafael — Tue, 26 Apr 2022 03:12:06 +0000

https://github.com/marcos-rafael-br

DEV Community: Marcos Rafael