1. Reference For CSS Units
It is important to understand CSS length units for building responsive and visually appealing websites. These units permit developers to define measurements for various CSS properties like width, height, margin, padding, etc. In this tutorial guide, we will develop an in-depth understanding of CSS units, explore their types, and comprehend their basics.
1.1. What are CSS Units and Their Types?
Web designers employ CSS units to define the size and spacing of HTML elements on a webpage. CSS units are the measurement standards used in Cascading Style Sheets (CSS) to define the size, spacing, and positioning of elements within a webpage.
These units allow web developers to specify dimensions in a consistent and scalable manner according to need. We can broadly classify CSS units into two main types, and each type has its own characteristics and use cases, offering developers flexibility and control over the layout and design of their websites.
- Absolute Units
- Relative Units
Example
h1 {
font-size: 36px;
margin: 30px 0;
}
h2 {
font-size: 30px;
margin: 20px 0;
}
.container {
width: 80dvw;
height: 50dvh;
}
2. Absolute CSS Units
We can define absolute CSS units as fixed measurements of web components that do not change based on the context or device size. We utilize the absolute type of units when precise sizing is required in CSS designs. However, they may not always adjust to different screen sizes or resolutions. This absolute type contains the following length units.
| Unit | Representation | Description |
| Centimeters | cm | We rarely use these metric system units due to a lack of scalability, but it is ideal for print media. |
| Inches | in | Metric system unit and is ideal for print media, but also lacks scalability. |
| Millimeters | mm | Metric system unit and is ideal for print media, but also lacks scalability. |
| Picas | pc | It is a traditional unit for measuring font size, line width, and other typographic dimensions. |
| Pixels | px | We commonly use pixel-type units for precise measurements. |
| Points | pt | Useful for print applications due to fixed relationship to physical dimensions. |
| Quarter-millimeters | Q | It is equivalent to a quarter of a millimeter. |
Check the following examples to comprehend the the absolute CSS units completely. These examples clarifies the usage of absolute units in CSS properties.
CSS Absolute Units
Unit(1) : Centimeter
.element {
width: 5cm;
}
Unit(2) : Inch
.element {
margin-top: 1in;
}
Unit(3) : Millimeter
.element {
padding-left: 10mm;
}
Unit(4) : Picas
.element {
line-height: 3pc;
}
Unit(5) : Pixel
.element {
font-size: 16px;
}
Unit(6) : Point
.element {
text-indent: 12pt;
}
Unit(7) : Quarter-millimeters
.element {
border-width: 0.25Q;
}
3. Relative CSS Units
In CSS declarations, relative units are based on the size of other elements or the viewport or perhaps the parent element, making them more variable or adjustable to different screen sizes and resolutions. They offer scalability, therefore, we commonly use them in our web pages to make them responsive. The relative type includes the following units:
| Unit | Representation | Description |
| Percentage | % | We use this CSS unit for relative sizing based on the parent element's dimensions. |
| Character | ch | It is equal to the width of the 0 glyph character |
| Dynamic Viewport Hight | dvh | This unit represents 1% of the dynamic viewport height. |
| Dynamic Viewport Width | dvw | It represents 1% of the dynamic viewport width. |
| EM | em | This unit is relative to the font-size of the parent element. |
| EX | ex | 1ex is equal to the x-height of the element's font i.e. lower case x glyph. Limited use. |
| Fractional Units | fr | It represents a flexible and dynamic way to distribute available space among elements within a flex container. |
| LH | lh | The line height of the element is relative to the font-zie of the parent element. |
| Large Viewport Height | lvh | 1lvh represents 1% of the large viewport height, excluding dynamic UI elements. |
| Large Viewport Width | lvw | 1lvw represents 1% of the large viewport width, excluding dynamic UI elements. |
| REM | rem | This font is relative to the font size of the root element. |
| Relative Length | rlh | This unit is equal to the computed line height of the root element typically <html> |
| Small Viewport Height | svh | 1svh represents 1% of the small viewport height, excluding dynamic UI elements. |
| Small Viewport Width | svw | 1svw represents 1% of the small viewport width, excluding dynamic UI elements. |
| Viewport Block | vb | It represents 1% of the block size of the initial containing block. |
| Viewport Height | vh | This unit represents 1% of the viewport height including dynamic UI elements. |
| Viewport Inline | vi | It represents 1% of the inline size of the initial containing block. |
| Viewport Maximum | vmax | This unit represents 1% of the larger dimension of the viewport for both width and height. |
| Viewport Minimum | vmin | This unit represents 1% of the smaller dimension of the viewport for both width and height. |
| Viewport Width | vw | It represents 1% of the viewport width including dynamic UI elements. |
Understand the usage of relative CSS units with the help of following examples.
CSS Relative Units
Unit(1) : Percentage
.element {
width: 50%;
}
Unit(2) : Character
.element {
font-size: 2ch;
}
Unit(3) : Dynamic Viewport Height
.element {
height: 50dvh;
}
Unit(4) : Dynamic Viewport Width
.element {
width: 75dvw;
}
Unit(5) : EM
.element {
margin-top: 1.5em;
}
Unit(6) : EX
.element {
width: 3ex;
}
Unit(7) : Fractional Units
.element {
grid-template-columns: 1fr 2fr;
}
Unit(8) : Line Height
.element {
line-height: 1.5lh;
}
Unit(9) : Large Viewport Height
.element {
height: 80lvh;
}
Unit(10) : Large Viewport Width
.element {
width: 70lvw;
}
Unit(11) : REM
.element {
font-size: 1.2rem;
}
Unit(12) : Relative Length
.element {
width: 2rlh;
}
Unit(13) : Small Viewport Height
.element {
height: 25svh;
}
Unit(14) : Small Viewport Width
.element {
width: 30svw;
}
Unit(15) : Viewport Block
.element {
width: 40vb;
}
Unit(16) : Viewport Height
.element {
height: 50vh;
}
Unit(17) : Viewport Inline
.element {
width: 60vi;
}
Unit(18) : Viewport Maximum
.element {
width: 90vmax;
}
Unit(19) : Viewport Minimum
.element {
height: 20vmin;
}
Unit(20) : Viewport Width
.element {
width: 50vw;
}
4. Basics of CSS Units
To define perfect lengths for CSS properties, we need to understand some basics to implement the units appropriately. Below are some basics of CSS units that should be kept in mind while creating lengths.
- We use CSS units to specify the lengths of certain properties.
- There must not be a whitespace between the unit and the number.
- However, if the number is 0, we can omit the unit.
- Relative length units scale better between different rendering mediums.
- Viewport: Viewport is the size of the browser window.
- Pixel: Pixels are device-relative units, equating to one device pixel on low-dpi displays and multiple pixels on high-resolution screens and printers.
- Some CSS properties accept negative measurement lengths.
The em and rem units work perfectly for scalable layouts.
5. Reference Links
To compile this ultimate reference and guide of the CSS units, we consulted the below resources.