CSS Length Units
Tags: webdev, beginners, discuss, css
Published: 2020-10-25 15:47:11

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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/30znchdqy2e8idykoj9t.jpg)
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 😛)

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

```CSS
#container {
    width: 5cm;
    height: 5cm;
}
```
{% codepen https://codepen.io/ritvikbunny/pen/XWKKbgN %}

## 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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9qobr5tujd0lkvvtcmjd.jpg)
***I personally recommend using vw, vh, along with vmin.***
The difference between relative and absolute length units will be more clear from example below.

```HTML
<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>
```

```CSS
#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)
{% codepen https://codepen.io/ritvikbunny/pen/BazzojN %}


***Source:- [MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)***
***Cover:- [Rajat Gour](https://twitter.com/rajatgour20)***


#### *Thank you for reading.*
#### *Please feel free to share your views about it.*
#### *I hope you liked it and found it helpful.*
#### *Connect with me on [Twitter](https://twitter.com/ritvikdubey27?s=09) or [LinkedIn](https://www.linkedin.com/in/ritvik-dubey-3bbb22169)*
#### *My personal blog [blog.ritvikdubey.com](https://blog.ritvikdubey.com/)*