Thread by @SauravPurohit4

Let's talk about CSS <length> data type.

It is used to specify distance measurements using absolute or relative units.

We can use them in CSS properties, such as width, height, margin, padding, font-size, and text-shadow.

⬇️

These CSS Units can be of mainly of two types :

👉 Absolute Lengths
👉 Relative Lengths

Let's see some of them below:

⬇️

1. Absolute Lengths (Do not change w.r.t device size ):

👉 cm/mm : Specify centimetres and millimetres.
👉 in : Specify inches.
👉 pc : Specify picas, 6 per inch.
👉 pt : Specify points, 72 per inch.
👉 px : Specify pixels, 96 per inch

2. (i) Relative Lengths (Changes w.r.t device size)

👉 em : relative to font size of the parent element
👉 rem: relative to font size of the root element
👉 ex : relative to x-height of element's font.
👉 ch : Based on width of the zero(0) character.

(ii) Relative viewport lengths.

👉 vw : Specify a percentage of the width of the current viewport
👉 vh : Specify a percentage of current viewport’s height.
👉 vmax and vmin : Specify the maximum or minimum of the viewport's width or height.

That's it for this thread. Did you find it useful? If yes, considering retweeting it and following me ( @SauravPurohit4 ) for more content on Web Development.

Thank You !!