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

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.