CSS Sizing Units
The beauty of things gets enhanced when it is in its proper dimension. In this digital era, it’s essential to organize the look of our websites, applications, line height, etc. The viewer feels it convenient to use our website if the content is in its correct size.
A responsive website dynamically adjusts to different screen sizes and viewports. To make one, we'll need a thorough understanding of various sizing units.
In this article, we’ll learn about different types of sizing units that are used in CSS properties. So, without any delay, let’s get started!
Length and Dimension
Dimension refers to a numeric data followed by a unit. Length is a dimension related to distance that can be either absolute or relative.
In CSS, we can’t put whitespace between the number and its unit. But if the value is 0, then we may avoid the unit.
Examples of length units in CSS are rem, px, etc.
In CSS, there are two different types of lengths:
- Absolute length
- Relative length
It's essential to understand the difference between the two. So, let’s see them one by one.
It refers to the fixed length. It isn’t measured in relation to anything else and is assumed to be the same size all the time. We use length in width, margin, height, padding, font size, etc.
Refer to the table below to see the various absolute length units with their description.
|cm||Centimeters||1cm = 96px/2.54|
|mm||Millimeters||1mm = 1/10th of 1cm|
|Q||Quarter-millimeters||1Q = 1/40th of 1cm|
|in||Inches||1in = 2.54cm = 96px|
|pc||Picas||1pc = 1/6th of 1in|
|pt||Points||1pt = 1/72th of 1in|
|px||Pixels||1px = 1/96th of 1in|
They are used when the output medium is known, such as for printing.
Note: Absolute length units are not preferred for use on-screen because screen sizes vary, and their dimension doesn’t change with the varying screen sizes.
Relative length units are described in comparison to another length property such as the viewport size, the parent element’s font size, etc. The advantage of using relative units is that you can scale the text or other elements on the page relative to everything else.
The table below shows some of the most useful sizing units.
|em||The font size of the element|
|ex||The x-height of the current font|
|cap||Height of capital letters in the present computed font size of the element.|
|ch||Average character advance of a narrow glyph in the element's font (represented by the "0" glyph).|
|ic||Average character advance of a full width glyph in the element's font, as represented by the "水" (CJK water ideograph, U+6C34) glyph.|
|lh||The line height of the element.|
|rlh||The line-height of the root (HTML) element.|
|rem||Font size of its root element (16px is default).|
|%||Its parent element.|
You can use the viewport’s dimensions, or we can say browser window as a relative unit. The table below lists some of the viewport units available for web development.
|vw||1% of the viewport's width.|
|vh||1% of the viewport's height.|
|vi||1% of viewport's size in the root element's inline axis|
|vb||1% of viewport's size in the root element's block axis.|
|vmin||1% of the viewport's smaller dimension.|
|vmax||1% of the viewport's larger dimension.|
Now, let’s discuss in detail the most widely used CSS unit.
CSS em unit
This unit is dependent on the parent’s font size. It means that if the parent font size is 10px, then 1em = 10px. When em units are declared for child elements that don’t have a predefined font size, it will inherit the same font size from its parent, another ancestor element, or go to the document’s root element.
For example, the font size of the parent is 20px and font size of its child div is 2em i.e. 2 x 20px, 40px.
CSS rem unit
This unit is dependent on the root's font size. Unless we explicitly define it, any HTML document's default root size will be 16px. When it comes to margins and padding, this unit is handy.
It is also a convenient unit for making responsive web pages. Simply modify the font size of the root element, and all other elements will adjust accordingly.
It is always set relative to some other value. For example, if we set an element's font size unit in percentage, it will be a percentage of the font size of the element's parent.
If we use a percentage for a height value, it will be a percentage of the height of the element's parent.
For example, the small rectangular box (blue) with percent class has 50% width of its parent container (yellow).
Angle units are helpful for the rotation of any element within transform functions.
For example, a blue container without applying any rotation is shown below.
Now, on applying rotation using transform:
The output will be
Frequently Asked Questions
1). Which is the smallest CSS size unit?
Answer: The pixel(px) is the most often used smallest absolute unit.
A pixel is commonly thought to be a single dot on a screen, but it is actually far more complicated. It is the smallest unit of measurement and is frequently used as a standard against which other units are measured.
2). How many types of CSS units are there?
Answer: There are two prominent types of CSS units: Relative and Absolute.
3). Which are the responsive units in CSS?
Answer: Relative units are considered as responsive units.
4). What is rem in CSS?
Answer: The rem is one of the important sizing units in CSS which means "The root element's font-size".
Although the web is a versatile medium, its dimensions may need to be adjusted to improve the overall quality of the experience. So, this article explained everything about dimension and sizing units in detail. A thorough understanding of these units will be helpful in developing awesome websites.
If you want to learn advanced front-end web development, Coding Ninjas has one of the best courses available, which you can find here.
Thank you for reading!