CSS has several different units for expressing a length.

Many CSS properties take “length” values, such as width, margin, padding, font-size, etc.

Length is a number followed by a length unit, such as 10px, 2em, etc.

There are two types of measurement units: absolute and relative.

==Note: The em and rem units are practical in creating perfectly scalable layout!== ==* Viewport = the browser window size. If the viewport is 50cm wide, 1vw = 0.5cm.==

Ex:

.box {

  /* 10 x font size of the current element */
  width: 15rem;

 /* based on font-size */
  height: 100vh;

 /* based on viewport */
  border: 3px solid gold;

 /* fixed size */
  background-color: lightblue;
}