Length measurements in CSS can either be absolute, like pixels or points, or relative, such as percentages (%) and em units.
When specifying CSS units for values other than zero, it's necessary because there's no default unit. Omitting or ignoring a unit will result in an error. However, if the value is 0, the unit can be left out (since zero pixels are the same as zero inches).
Note: Lengths refer to distances. They consist of a numeric value and a unit, like 10px, 2em, 50%, etc. There shouldn't be any whitespace between the number and the unit.
Relative length units are based on another length property. They include:
| Unit | Description |
|---|---|
| em | The current font-size |
| ex | The x-height of the current font |
Em and ex units rely on the font size applied to the element.
One em equals the computed value of the font-size property of the element where it's used. It can be used for vertical or horizontal measurements.
For example, if the font-size of an element is set to 16px and line-height is set to 2.5em, then the calculated line-height in pixels is 2.5 * 16px = 40px.
p {
font-size: 16px;
line-height: 2.5em;
}The exception arises when em is used in the value of the font-size property itself; in such cases, it refers to the font size of the parent element.
So, when a font size is specified in em, 1em equals the inherited font-size. Therefore, font-size: 1.2em; makes the text 1.2 times larger than the parent element's text.
body {
font-size: 62.5%;
font-family: Arial, Helvetica, sans-serif;
}
p {
font-size: 1.6em;
}
p:firt-letter {
font-size: 3em;
font-weight: bold;
}Let's break down this code. The default font size in modern browsers is 16px. The first step here is to reduce this size for the entire document by setting the body font-size to 62.5%, which resets the font-size to 10px (62.5% of 16px).
This simplifies the default font-size for easy conversion from px to em.
The ex unit equals the x-height of the current font.
The x-height is named so because it often matches the height of the lowercase 'x', as depicted below. However, an ex is defined even for fonts without an 'x'.
Absolute length units remain constant in relation to each other. They're useful when the output medium is known. These units include physical units (in, cm, mm, pt, pc) and the px unit.
| Unit | Description |
|---|---|
in |
Inches – 1in equals 2.54cm. |
cm |
Centimeters. |
mm |
Millimeters. |
pt |
Points – In CSS, one point equals 1/72 inch (0.353mm). |
pc |
Picas – 1pc equals 12pt. |
px |
Pixel units – 1px equals 0.75pt. |
Absolute physical units like in, cm, mm, etc., are suitable for print media and similar high-resolution devices. For on-screen display like desktops and lower-resolution devices, it's recommended to use pixel or em units.
h1 { margin: 0.5in; } /* inches */
h2 { line-height: 3cm; } /* centimeters */
h3 { word-spacing: 4mm; } /* millimeters */
h4 { font-size: 12pt; } /* points */
h5 { font-size: 1pc; } /* picas */
h6 { font-size: 12px; } /* picas */Advice: Style sheets employing relative units like em or percentage (%) can smoothly adapt from one output environment to another.