CSS Units Explained

CSS units explained | Code Architects

CSS uses many different types of measurement units to use in the HTML document. The units are a requirement for CSS to measure the length. They are used to set margins, padding, etc.

There are two type of CSS units

  1. Absolute length
  2. Relative length
1. Absolute length

The absolute length units are fixed and a length expressed in any of these will appear as exactly that size. The absolute length sizes are not relative to anything else and are considered to always be the same size. Absolute length units are not recommended for use on-screen, because screen sizes vary so much.

UnitNameEquivalent to
cmCentimeters1cm = 25/64in
mmMillimeters1mm = 1/10cm
inInches2.54cm
px*Pixels1px = 1/96 of 1in
ptPoints1pt = 1/72 of 1in
pcPicas1pc = 12pt

2. Relative length

Relative length units specify a length relative to another length property. These units scale better between different rendering mediums. The em and rem units are practical in creating a perfect scalable layout. We can use the relative units as the default for the responsive units. It helps us to avoid update styles for different screen sizes.

UnitEquivalent to
emRelative to the font-size of the element
exRelative to the x-height of the current font
chRelative to the width of the “0”
remRelative to the font-size of the root element
vwRelative to the 1% of the width of the viewport
vhRelative to the 1`% of the height of the viewport
vminRelative to the 1% of viewport smaller dimension
vmaxRelative to the 1% of the viewport of larger dimension
*Relative to the parent element

Share this post, if you have liked it & thanks for scrolling. CSS units are great if you use them wisely.

You can read our other blogs here

Checkout our Instagram, GitHub.

Show 2 Comments

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

eight − eight =