| Unit | Description |
|---|---|
ch |
The width of the character "0" in the current font, used for widths or spacing relative to the character size. |
rem |
Relative to the root element's (<html>) font size, often used for scalable and consistent spacing and typography. |
fr |
A fraction of the available space in CSS Grid layouts, useful for dividing space proportionally between grid items. |
em |
Relative to the font size of the parent element, used for scalable sizing of text or other elements. |
px |
An absolute unit representing pixels, used for fixed-size elements that do not scale with the layout. |
% |
Relative to the size of the parent element, commonly used for setting widths, heights, margins, or padding. |
vw |
Viewport width. 1 vw equals 1% of the width of the viewport (browser window). |
vh |
Viewport height. 1 vh equals 1% of the height of the viewport. |
vmin |
The smaller value between vw and vh, useful for responsive design. |
vmax |
The larger value between vw and vh, used when you want an element to scale based on the larger dimension. |
cm |
Centimeters, an absolute length unit, typically used for print media. |
mm |
Millimeters, another absolute length unit, typically used for print media. |
in |
Inches, an absolute unit, primarily used in print design (1 inch = 2.54 cm). |
pt |
Points, an absolute unit where 1 point equals 1/72 of an inch, often used in print media. |
pc |
Picas, another print-based unit where 1 pica equals 12 points or 1/6 of an inch. |
This section demonstrates various CSS units (ch, rem, fr, em, px, etc.) and how they behave in a browser.
Here are some boxes with different CSS units applied for comparison:
| Unit | Box Example | Description |
|---|---|---|
| 1rem |
5rem width
|
Box with a width of 5 times the root element's font size. |
| 1em |
5em width
|
Box with a width relative to the parent element's font size. |
| 50px |
50px width
|
Fixed-size box of 50 pixels width. |
| 10ch |
10ch width
|
Box with a width equivalent to the width of 10 "0" characters in the current font. |
| 20vw |
20vw width
|
Box with a width of 20% of the viewport's width. |
To demonstrate the fr unit, here's a simple grid layout:
1fr
2fr
1fr
In the example above, the grid columns are distributed as 1 fraction for the first and third columns, and 2 fractions for the middle column.