Units in CSS

Absolute

Fixed values cm, mm, px.

Pixels used to cause a lot of problems, as they were a fixed unit (one dot on the screen). Now, it follows the reference pixel. So not a dot on screen anymore.

<aside> ⚠️ We use calc function to do different kind of calculations in css. A better alternative can be clamp function which takes 3 values the middle value is the same as what you pass to calc(), the opening value specifies the minimum size and the closing value specifies the maximum size.

</aside>

Relative

Depends on other things like parent etc.

Used to make the website responsive.

Units are %, em, rem, vh, vw, max-height, min-height.

• vh/vw, viewport height and viewport width can range from 0-100.

There are two types of relative units.

• Relative to font-size: em, rem

  • em is relative to parent’s font size if used for font-size else they take the font-size of the element itself.
  • em units are very convenient for some things, but when we use them for the font-size of an element though, it can create a cascading effect.
  • The rem unit is short for Root Em that means it's always relative to the "root" of our document.

  <aside> 💡 The root of an HTML page is always the html element.

  </aside>

• Relative to the viewport: vm, vh, vmin, vmax

Percentages are mainly used for widths, and are pretty easy to understand.

• They are relative to their parent (except on height, where things get weird).

Some General Rule of thumb

Font-size = rem

Padding and margin = em

Widths = em or percentage