CSS - Length (Unit)

> (World Wide) Web - (W3|WWW) > CSS - Cascading Style Sheets - Markup Language (HTML|XML) Skin > CSS - Boxes (Box Model)

1 - Introduction

Lengths refer to horizontal or vertical measurements.

Advertising

3 - Format

The format of a length value is a number (with or without a decimal point) immediately followed by a unit identifier :

  • e.g.,
  • px,
  • em,
  • etc

After a zero length, the unit identifier is optional.

The recommended unit scales are:

  • Screen: rem, em, px, %
  • Print: em, cm, mm, in, pt, pc, %

4 - Type

There are two types of length units.

When the physical properties of the output medium are

  • unknown, use relative unit
  • known, use absolute unit.
Advertising

4.1 - Relative

Relative length units specify a length relative to another length property. Style sheets that use relative units will more easily scale from one medium to another (e.g., from a computer display to a laser printer).

Relative units are:

  • em: the font-size of the element (of its parent)
  • rem: font size of the root element of the document.
  • ex: the 'x-height' of the relevant font
  • px: pixels, relative to the viewing device

Example:

h1 { margin: 0.5em }      /* em */
h1 { margin: 1ex }        /* ex */
p  { font-size: 12px }    /* px */

4.1.1 - em

The emphemeral unit (em) is relative to the current font size.

em is an old typographic unit also known as:

  • em square (ie a blank square where the length of each side was the same as the width of an uppercase M)
  • or mutton.

It is often used in typography to specify:

An em square was a square blank type, where the length of each side was the same as the width of an uppercase 'M' – normally the widest glyph in a given font.

The origin of its name come from the its first definition: em is equal to the width of the capital letter M (e=equal, m=capital letter M).

The em unit is equal to the computed value of the font-size property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element. It may be used for vertical or horizontal measurement. (This unit is also sometimes called the quad-width in typographic texts.)

Example Window/getComputedStyle

.parent { font-size: 20px }
.medium { font-size: 0.75em }
.small { font-size: 0.5em }
<div class="parent">
    <p>Hello Nico</p>
    <p class="medium">Hello Nico</p>
    <p class="small">Hello Nico</p>
</div>
div = document.querySelector("div");
console.log("The font size of the parent div element is "+window.getComputedStyle(div).fontSize);
allP = document.querySelectorAll("p");
console.log("The font size of the first p element is "+window.getComputedStyle(allP.item(0)).fontSize);
console.log("The font size of the medium p element is "+window.getComputedStyle(allP.item(1)).fontSize);
console.log("The font size of the small p element is "+window.getComputedStyle(allP.item(2)).fontSize);

Advertising

4.1.2 - rem

rem is the font size of the root element of the document.

4.1.3 - ex

The 'ex' unit is defined by the element's first available font. The 'x-height' is so called because it is often equal to the height of the lowercase “x”. However, an 'ex' is defined even for fonts that don't contain an “x”.

4.1.4 - x-height

The x-height of a font can be found in different ways. Some fonts contain reliable metrics for the x-height. If reliable font metrics are not available, UAs may determine the x-height from the height of a lowercase glyph. One possible heuristics is to look at how far the glyph for the lowercase “o” extends below the baseline, and subtract that value from the top of its bounding box. In the cases where it is impossible or impractical to determine the x-height, a value of 0.5em should be used.

Example(s):

The rule Means That
h1 { line-height: 1.2em }
the line height of “h1” elements will be 20% greater than the font size of the “h1” elements.
h1 { font-size: 1.2em }
the font-size of “h1” elements will be 20% greater than the font size inherited by “h1” elements

When specified for the root of the document tree (e.g., “HTML” in HTML), 'em' and 'ex' refer to the property's initial value.

4.1.5 - pixel

Pixel units are relative to the resolution of the viewing device, i.e., most often a computer display.

4.2 - Absolute

Absolute length units are only useful when the physical properties of the output medium are known. The absolute units are:

  • in: inches — 1 inch is equal to 2.54 centimeters.
  • cm: centimeters
  • mm: millimeters
  • pc: picas — 1 pica is equal to 12 points.

Example(s):

h1 { margin: 0.5in }      /* inches  */
h2 { line-height: 3cm }   /* centimeters */
h3 { word-spacing: 4mm }  /* millimeters */
h4 { font-size: 12pt }    /* points */
h4 { font-size: 1pc }     /* picas */

In cases where the used length cannot be supported, user agents must approximate it in the actual value.

5 - Negative

Some properties allow negative length values, but this may complicate the formatting model and there may be implementation-specific limits. If a negative length value cannot be supported, it should be converted to the nearest value that can be supported.

If a negative length value is set on a property that does not allow negative length values, the declaration is ignored.

6 - Inheritance

Child elements do not inherit the relative values specified for their parent; they inherit the computed values.

Example(s):

In the following rules, the computed 'text-indent' value of “h1” elements will be 36px, not 45px, if “h1” is a child of the “body” element.

body {
  font-size: 12px;
  text-indent: 3em;  /* i.e., 36px */
}
h1 { font-size: 15px }

7 - Documentation / Reference