CSS Length Units

#webdev #beginners #discuss #css

This is a short and informative article. This article is about CSS length units.
Here are some units that you might know, but I recently got to know about them and I was amazed to know about that they exists.
In CSS there are many types of values, we will talk about numeric values and in numeric value we will specifically talk about length values.

LENGTH

The most frequently used numeric type is length. There are number of CSS properties that takes length some of them are width, height, margin, border etc. Length value is a number followed by a length unit. Length value can be zero, positive value and in some cases negative values.

There are two type of length units

1. Absolute Length

These units are the fixed length units or you can say constant units. These units will give you same size no matter what is the change in size of screen. These units must be used for print layout.

So I was amazed to know about cm(centimeter). Actually I was amazed to know about all these absolute length units except cm. We mostly use px(pixels) but we are also friendly with cm if you want you can give it a try. (It was tough for me to believe so I gave it a try 😛)

<body>
    <div id="container">
    </div>
</body>

#container {
    width: 5cm;
    height: 5cm;
}

2. Relative Length

Relative length units are relative to something else for e.g. siz of parent element, viewport size etc. These units are very helpful as you change the screen size the size of elements changes relatively. So relative length units makes development more comfortable to us.

I personally recommend using vw, vh, along with vmin.
The difference between relative and absolute length units will be more clear from example below.

<body>
    <div id="container">
      <div id="for-px">
        <h1 id="px-h1">For px</h1>
      </div>
      <div id="for-vw">
        <h1 id="vw-h1">For vw</h1>
      </div>
    </div>
</body>

#for-px {
  width: 150px;
  height: 50px;
}
#for-vw {
  width: 20vw;
  height: 20vh;
}

In this example we have two divs for-px and for-vw. The for-px will remain same when you change the screen size but in case of for-vw if we change screen size then we will observe a relative change. (If you are reading it in mobile then change browser setting to desktop-site to see the difference and if you are reading it in PC you can change screen size to see the change)

Source:- MDN web docs
Cover:- Rajat Gour