Units of measurements

Since we design a webpage in css by putting width and height and margin and paddings and borders and many other properties, we need to tell the browser how much long will be the height or how much wide will be the width or how much space will be considered margin or padding.
Web browsers do not understand the normal measurement units of length such as kilometer or meter or centimeter.
The smallest unit of measurement is pixel(px) which is a single dot or smallest dimension of smallest addressable element on a screen.
We have 2 types of units for measurement such as:

  • Absolute units of measurement such as px
  • Relative units of measurement such as % or vw or vh or rem or em
Absolute Units of measurements
px is used to define font size, width , height, margin, padding, border etc. It always set a fixed value so irrespective of screen size (big or small), it will be of fixed size so it will not be responsive.
Relative Units of measurements

rem or em is always relative to px. and it is the font size of root element i.e html tag.
By default, 1rem = 16px. But we can always change this value by below snippet such as : 

// CSS
html{
  font-size: 10px; // Now 1 rem = 10px
}

p{
  font-size: 1.8rem;
}


Now, once we change it in html tag itself then putting any value either of width or height or margin or anything in rem unit becomes much easy.
Kindly observe that if you need to put a font size for example of 18px then you simply need to put 1.8rem or if 28px then 2.8 rem. Calculation becomes easy mentally and this is very widely used trick if you want to change the default font size of 18px.
If you do not change this, then putting a font size of 16px is equal to 1 rem and 28px will be 16/28 = 0.57rem.

Now vw stands for viewport width and vh stands for viewport height. And Viewport means the the entire UI you see on the browser without any scroll. And hence same way viewport width is the width you see on browser without any horizontal scrollbar and viewport height is the height you see on browser without any vertical scrollbar.

Now we have percentage units also, which only works on widths and not on heights. By default any block level elements width is always 100% unless you reduce it. So we can reduce it by percentage unit also like 20% or 38% or 70% etc.
This percentage unit is used to make a website responsive and mostly used for defining widths.

PrevNext