Css Tips & Tricks

Amina laabidi

2 min readJul 31, 2021

Css units are confusing !

Px (absolute)

Avoid using ‘px’ for font-sizes. Use mostly for small details like border and shadow.

Fixed in size
Not responsive
Overrides user’s browser preferences

% (relative)

i recommend using percentages for layouts and width/height. For example, laying out links on navbar, placing images inside a div , etc

Size is defined as percentage of another value (mostly parent element)
Sometimes size is defined as percentage of the element itself

em (relative)

You can use ’em for font-size and margin/padding. Use ’em when you want to adjust margin/padding based on that element’s font-size (if font-size is big, you maybe want bigger spacing).

Changes behavior based on property
em = parent font-size
if parent doesn’t have a size , defaults to 16px (body)

Here,the .list-item class will double its parent element’s font size

rem (relative)

You can also use ‘rem for font-size and margin/padding . “remis easier to work with than ’em because it’s more consistent.

Relative to root HTML , no matter what (default is 16px)
You can change the root HTML size ,For example , if you change it to 20px , 1rem will always be 20px.

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

vw/vh (relative)

vw/vh 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

useful for responsive websites because everything scales

ch

‘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 reasability

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

This sets the width of the column to a maximum of 40 characters per line.