Several CSS properties take “Length” values, such as width, padding, font size, margin, etc. The Length values are used to set the size of an element or space an element in a web page.
The two main types of length units used in CSS are absolute and relative. Understanding how these two units work is important for styling web pages using CSS.
Absolute Length Units
Absolute Length units describe physical units of length. They approximate the actual size of an element on the screen and are not relative to any other element or measurement. Absolute Length Units include centimeters(cm), millimeters(mm), inches(in), pixels(px), points(pt) and picas(px).
The absolute length units are fixed and a length expressed in any of these will appear as exactly that size when displayed. The only value that you will commonly come across is px (pixels). The others are more useful for print.
Absolute Units are not recommended for use on screens because they will look the same whether on desktop, tablet, or mobile, and will not change along with the viewport’s dimensions, making it impossible to build responsive web pages.
Relative Length Units
Relative length units specify a length relative to another length property which for example could be the size of the viewport or the size of the parent element’s font. Relative length units are useful for making responsive websites.
They scale relative to a parent or the viewport and allow for websites to adapt style sheets from one environment to another, such as from mobile to desktop.
Some of the most useful relative units for web development are listed in the table below
em and rem are the two relative lengths you are likely to encounter most frequently when sizing elements.
It is good practice for web developers to set length values using relative length units rather than absolute units. This makes it easier to manipulate the size of elements, easily halving or doubling the size instead of setting explicit values.
Thanks for reading!
Top comments (0)