DEV Community: encryption akademy

CSS Units Tutorial – Absolute units, Relative units, Time units, Angle units & Resolution Units Explained

encryption akademy — Tue, 24 Jun 2025 06:02:49 +0000

This article is part of CSS Complete tutorial and is available at this link.

The basic Goal of CSS is to define characteristics of an elements so the browser engine can paint it on webpage. The most basic building block in CSS is called Decleration. A CSS property and value pair forms an Decleration(name:value). It is used to set an property to specific value.

In CSS, rules are written as name:value pair. The value of any parameters needs to be expressed in an particular type of unit. There are numerous types of Units available in CSS. Broadly these units can be categorised into two types in CSS.

Absolute Units
Relative Units

Absolute Units

Absolute units are standard units which we use in our daily life. The size of these units is fixed and does not change with screen size. These units are more useful when used for printed documents rather than screen. The Absolute Units available is CSS is listed below.

Centimeter - cm
Millimeter - mm
Quarter-millimeter - Q
Inches - in
Picas - pc
Points - pt
Pixels - px

1. Centimeter - cm
Centimeter is represented as cm. The value of 1 Centimeter is nearly equal to 37.8 pixel or 0.394inch.

2. Millimeter - mm
Millimeter is represented as mm. The value of 1 Centimeter is nearly equal to 3.78 pixel or 1/10th of centimeter.

3. Quarter-millimeter - Q
Quarter-millimeter is represented as Q. The value of 1 Quarter-millimeter is nearly equal to 1/40th of centimeter.

4. Inches - in
Inches is represented as in. The value of 1 Inches is nearly equal to 2.54 centimeter or 96 Pixel.

5. Picas - pc
Picas is represented as pc. It is an unit used in typography. It was generally used in newspapers and magzines. The value of 1 Picas is nearly equal to 1/6th of 1 inch.

6. Points - pt
Points is represented as pt. It is an unit used in typography. It is generally used by printers or word processing softwares. Traditionally value of 1 point is nearly equal to 1/72th of 1 Inch.

7. Pixel - px
Pixel is represented as px. Pixel is the most widely used length unit. Traditionally monitors had an resolution of 1024 X 768 and with an DPI(Dots per Inch) of 96. Hence 1 pixel was considered equal to 1/96th of inch. But monitors now have higher DPI, hence 1 pixel is generally not equal to 1/96th of inch. So the size of 1 pixel vary with device.

NOTE:
In all the CSS units there is no space between the unit and number. So the correct way of specifying a property value is "20px" and not "20 px".

Unit	Name	Equivalent To	Description
px	Pixel	1px = 1/96in	Screen-based fixed unit.
in	Inch	1in = 2.54cm	Physical inch.
cm	Centimeter	1cm = 10mm	Physical centimeter.
mm	Millimeter	1mm = 10Q	Physical millimeter.
Q	Quarter-millimeter	1Q = 0.25mm = 1/40cm	Used in Japanese typesetting for fine print control.
pt	Point	1pt = 1/72in	Standard unit in typography.
pc	Pica	1pc = 12pt = 1/6in	Used in publishing and layout.

Relative Units

The value of Relative units depends on something else. Generally they are calculated relative to parent element font or viewport (visible area of screen) size. The main advantage of using Relative units is that their size gets adapted to various screen sizes. The Relative units available is CSS is listed below.

Percentage
rem
ex
ch
lh
rlh
em

1. The Percentage % Unit
The Percentage % unit is is a relative unit in CSS that expresses a value as a fraction of another value — usually the value of a parent element or containing block, depending on the CSS property. This unit can be used with various properties such as width, height, margin, padding, and font-size.

<div>
  <div>Width: 50%</div>
  <div>Width: 30%</div>
</div>

Let us see the Behavior of various propeties when percentage is used by Property Type.

CSS Percentage-Based Properties

Property	Percentage is Relative To
`width`, `min-width`, `max-width`	Width of the parent element
`height`, `min-height`, `max-height`	Height of the parent element (only works if parent has defined height)
`margin`, `padding`	Width of the parent (even for top/bottom)
`font-size`	Font size of the parent element
`translate`, `top`, `left` (positioning)	Size of the containing block

2. The em Unit

In CSS em unit refers to font-size of the current HTML element it is used for. If the font-size of an element is 12px then 1em is equal to 12px for that element. Hence the value changes from element to element.

When em is used for font-size property it is relative to font size of parent element. Because of this em unit often gets compounded with subsequent childrens.

Example: Consider You have 3 divs, where Ist div is parent of 2nd div and 2nd div parent of 3rd. If font-size of 1st, 2nd and 3rd div is set to 20px, 1.5em, 1.5em respectively. So the font-size of 2nd div becomes 20 x 1.5 = 30px and font-size of 3rd div becomes 30 x 1.5 = 45px. So you have to be carefull while using em unit.

3. The rem Unit

The rem unit is relative to the font size of the webpage's root element (). So 1rem is equal to the font-size value of root element.

This unit brings consistency in design. It overcomes the compounding effect caused by nested elements because its value is not effected by parent elements. In case the font-size of root element is not set, it is equal to default font-size provided by Browser and is generally 16px.

<div style="font-size: 30px;"> 
 <p style="font-size: 1em;"> 
  I am text with font-size 1em. 
 </p> 
 <p style="font-size: 1rem;"> 
  I am text with font-size 1rem. 
 </p> 

</div>

4. The ex Unit

The CSS ex unit is based on the height of lowercase letter "x" in the font used. The size of letter x is different in each font. So if two paragraphs use different fonts, then the value of ex can be different for each paragraph. Hence it is rarely used.

5. The ch Unit

The ch unit also known as character Unit, is based on width of character 0(zero) of the font used. So 1ch is equal to width of character 0.

For a monospace font like "Courier" all the characters are exaclty 1ch in width. But for majority other fonts which are proportional in nature, a character may be smaller or bigger than 0.

Line Height Units

6. The lh Unit

The lh unit is based on line-height of current element that it is being applied to. Browser assigns every line an box with text vertically centered in it. So 1lh equals this line height as shown in figure below.

The rlh Unit The rlh unit is based on line-height of root element () of the webpage.

Resolution Based Units

A resolution is used to specify the pixel density of the output device. In CSS there are units based on resolution which are listed below.

Dots per inch - dpi
Dots per centimeter - dpcm
Dots per pixel unit - dppx

1. Dots per inch - dpi
dpi stands for dots per inch. This dot represents dots on paper for printed documents, pixel for desktop or mobile devices.

2. Dots per centimeter - dpcm
dpcm stands for dots per centimeter. It is same as dpi except centimeter is used in place of inch.

3. Dots per pixel unit - dppx
dppx stands for dots per pixel unit. In simple words it is a CSS unit that tells how many real screen pixels fit into one CSS pixel. Think of it like this:

1 dppx = 1 screen pixel for every CSS pixel → normal screen
2 dppx = 2 screen pixels for every CSS pixel → retina or high-resolution screen
3 dppx = 3 screen pixels for every CSS pixel → ultra high-resolution screen

NOTE:
x is alias for dppx

Time Units

In CSS Time Units are used to define durations for transitions, animations, delays, etc. CSS provides two main time units:

seconds - s
milliseconds - ms

1. seconds - s

s stands for seconds, the base unit of time in CSS for animations and transitions. Typically used for longer durations, like animations or loading sequences.

Example:

div {
  animation: fadeIn 2s ease-in;
}

2. milliseconds - ms

ms stands for milliseconds (1/1000 of a second). Best for faster or subtle effects where even a small delay matters. The common use cases are listed below.

Quick hover or focus effects
Button presses
Tooltip appearances
Micro-interactions (e.g., toggles, checkboxes)

Example:

button {
  transition: background-color 150ms ease;
}

Angle Units

CSS angle units are used to represent rotations, directions, and gradients. They are most commonly use them in: transform: rotate(), conic-gradient(), linear-gradient() (angle direction), @keyframes (e.g., rotating elements). The Angle Units available in CSS are listed below.

degrees - deg
gradians - grad
radians - rad
turns - turn

1. degrees - deg

It is the most common and human-readable unit. 1 full rotation is euqal to 360°.

Example:

transform: rotate(90deg);     /* quarter turn */
transform: rotate(-45deg);    /* counter-clockwise */

2. gradians - grad

Gradians were designed to make angular measurements more decimal-friendly, with 100 gradians in a right angle instead of 90 degrees. This makes calculations easier in some surveying and engineering applications.
Key conversions:

400 gradians = 360 degrees (full circle)
200 gradians = 180 degrees (straight angle)
100 gradians = 90 degrees (right angle)
1 gradian = 0.9 degrees

This unit is used in engineering, surveying, scientific applications. It is rarely used in web design but supported.

Example:

transform: rotate(100grad);   /* 90 degrees */

3. radians - rad

Radian is a unit of angular measurement, based on the radius of a circle rather than arbitrary divisions.

One radian is the angle you get when you take the radius of a circle and wrap it around the circumference. Since the circumference of a circle is 2π times the radius, a full circle contains exactly 2π radians.

To convert between them:
Degrees to radians: multiply by π/180
Radians to degrees: multiply by 180/π

Key conversions:

360° = 2π radians
180° = π radians
90° = π/2 radians
60° = π/3 radians
45° = π/4 radians
30° = π/6 radians

Example:

transform: rotate(1.57rad);  /* ~90 degrees */

4. turns - turn

The turns unit represents an angle in a number of turns. One full circle is equal to 1turn. This unit makes easy to express half or quarter turns.

Example:

transform: rotate(1turn);     /* full rotation */
transform: rotate(0.25turn);  /* 90 degrees */

CSS Viewport-units - A detailed Guide

encryption akademy — Mon, 23 Jun 2025 05:39:46 +0000

This article is part of CSS complete tutorial by encryption-akademy and available at this link.

Viewport is the area of window in which webpage is currently seen. In terms of web-browser, it is same as browser window and excludes menu bar etc. Its size varies with device, mode and orientation. In CSS there are 6 units based on viewport which are listed below.

viewport width unit - vw
viewport height unit - vh
viewport block unit - vb
viewport inline unit - vi
viewport minimum unit - vmin
viewport maximum unit - vmax

1. viewport width unit - vw

VW stands for Viewport width. It is an unit to measure the width of viewport. VW is equivalent to percentage of viewport width. So 10vw is equal to 10% of viewport width and 100vw is full width of viewport.

Example: consider viewport dimensions as 1920px x 1080px. So 10vw is calculated as 10% of 1920 which is equal to 192px.

2. viewport height unit - vh

VW stands for Viewport height. It is an unit to measure the height of viewport. VW is equivalent to percentage of viewport height. So 10vh is equal to 10% of viewport height and 100vh is full height of viewport.

For example consider viewport dimensions as 1920px x 1080px. So 10vh is calculated as 10% of 1080 which is equal to 108px.

3. viewport minimum unit - vmin

vmin stands for viewport minimum. This unit refers to dimension of viewport which is smaller(either height or width). 10vmin is equal to 10% of smaller dimension of viewport and 100vmin is full size of it.

Example: consider viewport dimensions as 1920px x 1080px.
So in portrait mode vmin unit will refer to 1080px and 10vmin is calculated as 10% of 1080 which is equal to 108px,
While in landscape mode, vmin will again refer to 1080px.
In contrast, the vh/vw unit will correspond to different dimension in portrait and landscape mode.

4. viewport maximum unit - vmax

vmax stands for viewport maximum. This unit refers to dimension of viewport which is larger(either height or width). 10vmax is equal to 10% of Larger dimension of viewport and 100vmin is full size of it.

For example consider viewport dimensions as 1920px x 1080px. So in portrait mode vmax unit will refer to 1080px and 10vmax is calculated as 10% of 1920 which is equal to 192px,
While in landscape mode, vmax will again refer to 1920px.
In contrast, the vh/vw unit will correspond to different dimension in portrait and landscape mode.

Block And Inline Axis

Not all language in world starts at left side of line. Each language has has its own direction of text flow. For example Arabic languages are right-to-left in direction. Chinese or japanese Languages are written from top-to-bottom with new line added to left. To incorprate all these writing modes, CSS introduced two new properties vi and vb which depend on Inline and Block Axis.

Inline Axis is parallel to the flow of text. It is horizontal axis for horizontal witing modes and vertical for vertical witing modes. For example it is horizontal axis for English Language.

Block Axis is perpendicular to the flow of text. It is vertical axis for horizontal witing modes and horizontal for vertical witing modes. For example it is vertical axis for English Language.

6. viewport inline unit - vi

vi stands for Viewport Inline. It has the same direction as Inline Axis. For horizontal writing mode it corresponds to width and for vertical writing mode it corresponds to height of viewport. 1vi is 1% of viewport size along inline axis.

7. viewport block unit - vb

vb stands for Viewport Block. It has the same direction as Block Axis. For horizontal writing mode it corresponds to height and for vertical writing mode it corresponds to width of viewport. 1vb is 1% of viewport size along block axis.

Viewport Unit Modifiers

All the above Viewport units works perfectly for desktop computers, but presents challenges on mobile devices. The viewport of mobiles changes due to the presence of scrollable toolbars. These toolbar generally consists of address bar, navigation bar and other. They contracts and expands on scrolling based on user input.

To overcome this problem, the various states of the viewport has been defined/specified and new units have been created based on these new viewport states. These new states and corresponding new units are listed below.

Large Viewport - lvw, lvh, lvmin, lvmax, lvi, lvb
Small Viewport - svw, svh, svmin, svmax, svi, svb
Dynamic Viewport - dvw, dvh, dvmin, dvmax, dvi, dvb

Large Viewport

Large Viewport is a state when all toolbars are contracted to their fullest extent. So the maximum screen area becomes available for page content.

The Large Viewport units allows developer to size an element by full viewport area. These units have the lv prefix followed by the six viewport units which we had seen earlier. The units are lvw, lvh, lvmin, lvmax, lvi, lvb. These units are described briefly in the below table.

Unit	Full Name	Description	What it Represents
`lvw`	Large Viewport Width	1% of the large viewport's width	Width when browser UI is hidden (maximum width available)
`lvh`	Large Viewport Height	1% of the large viewport's height	Height when browser UI is hidden (maximum height available)
`lvi`	Large Viewport Inline	1% of the large viewport's inline dimension	Inline direction size (typically width in horizontal text layouts)
`lvb`	Large Viewport Block	1% of the large viewport's block dimension	Block direction size (typically height in horizontal text layouts)
`lvmin`	Large Viewport Minimum	1% of the smaller dimension	Whichever is smaller between `lvh` and `lvw`
`lvmax`	Large Viewport Maximum	1% of the larger dimension	Whichever is larger between `lvh` and `lvw`

Small Viewport

Small Viewport is a state when all toolbars are expanded to their fullest extent. So the minimum screen area becomes available for page content.

The Small Viewport units allows developer to size an element in accordance to smallest viewport area. These units have sv prefix. The units are svw, svh, svmin, svmax, svi, svb. These units are described briefly in the below table.

Unit	Full Name	Description	What it Represents
`svw`	Small Viewport Width	1% of the small viewport's width	Width when browser UI is shown (minimum width available)
`svh`	Small Viewport Height	1% of the small viewport's height	Height when browser UI is shown (minimum height available)
`svi`	Small Viewport Inline	1% of the small viewport's inline dimension	Inline direction size (typically width in horizontal text layouts)
`svb`	Small Viewport Block	1% of the small viewport's block dimension	Block direction size (typically height in horizontal text layouts)
`svmin`	Small Viewport Minimum	1% of the smaller dimension	Whichever is smaller between `svh` and `svw`
`svmax`	Small Viewport Maximum	1% of the larger dimension	Whichever is larger between `svh` and `svw`

Dynamic Viewport

Dynamic Viewport is a state which is compatible with changes in the viewport. It adjusts itself according to UI changes by equating itself to current viewport.

When all toolbars are expanded and viewport becomes smallest possible, then Dynamic Viewport becomes equal to size of Small viewport
When all toolbars are contracted and viewport becomes largest possible, then Dynamic Viewport becomes equal to size of large viewport

Dynamic Viewport units allows developer to set lenghts according to the size of viewport in every state. These units have dv prefix. The units are dvw, dvh, dvmin, dvmax, dvi, dvb.

Unit	Full Name	Description	What it Represents
`dvw`	Dynamic Viewport Width	1% of the dynamic viewport's width	Width that adapts as browser UI dynamically shows/hides
`dvh`	Dynamic Viewport Height	1% of the dynamic viewport's height	Height that adapts as browser UI dynamically shows/hides
`dvi`	Dynamic Viewport Inline	1% of the dynamic viewport's inline dimension	Inline direction size that adapts dynamically (typically width in horizontal text layouts)
`dvb`	Dynamic Viewport Block	1% of the dynamic viewport's block dimension	Block direction size that adapts dynamically (typically height in horizontal text layouts)
`dvmin`	Dynamic Viewport Minimum	1% of the smaller dimension	Whichever is smaller between `dvh` and `dvw`
`dvmax`	Dynamic Viewport Maximum	1% of the larger dimension	Whichever is larger between `dvh` and `dvw`