<length>

The <length> CSS data type represents a dimension or a distance measurement. It consists of a <number> followed by a unit of length. The number is immediately followed by the unit, i.e no white space is allowed between them, and the length units are case-insensitive.

Many CSS properties take <length> values such as font-size, margin, line-height, etc. A <length> value can be negative in some cases. Some properties may restrict the length value to some range. If the value is outside the allowed range, the declaration is invalid and must be ignored.

CSS offers a number of different units for expressing length. Some have their history in typography, such as point (pt) and pica (pc), others are known from everyday use, such as centimeter (cm) and inch (in). And there is also a unit that was invented specifically for CSS: the pixel (px).

CSS also defines a set of other length units, all of which, including the previously mentioned ones, fall in one of two categories: absolute units or relative units.

Absolute Lengths

Absolute lengths are specified using a number followed by an absolute length unit.

The absolute length units consist of the physical units (in, cm, mm, pt, pc) and the px unit.

These absolute dimensions are either anchored (i) by relating the physical units to their physical measurements (e.g on paper and hi-dpi screens), or (ii) by relating the pixel unit to the reference pixel (e.g. on low-dpi screens).

(i) A length expressed in any of (cm, mm, in, pt and pc) will appear as exactly that size (within the precision of the hardware and software). They are not recommended for use on screen. They are mainly useful when the output environment is known, such as print. The absolute length units are fixed in relation to each other and anchored to some physical measurement. The relation between the absolute units is as follows: 1in = 2.54cm = 25.4mm = 72pt = 6pc.

For high-dpi (high-resolution) devices, inches (in), centimeters (cm) and millimeters (mm) have the same measurement as their physical measurements. Therefore the px unit is defined relative to them (1px = 1/96in). The higher the screen resolution the closer it gets to print resolutions, which is why it makes sense to use cm, mm and in as reference measurements. In this case where the anchor unit is a physical unit, the pixel unit might not map to a whole number of device pixels (1px may be equal to 3.125 device pixels, for example, instead of a whole number).

(ii) For low-dpi devices, the pixel px represents the physical reference pixel and the others are defined relative to it. One CSS px is typically equal to one device pixel, which is a dot on the screen. Since the px is the anchor unit of such devices, 1in is defined as 96px. As a result, the physical units (in, cm, and mm) might not match their physical measurements, so 1cm on a low resolution screen may not map to 1cm on paper, for example.

px

Despite being an absolute length, the px is not defined as a constant length, it is defined relative to the viewing device (print or screen devices). They are defined as absolute in CSS 2.1, but described in a relative manner, because a device may choose to render a px any size it wants in relation to a pixel to achieve the correct PPI and viewing distance for the device.

For typical screen displays, 1 CSS px equals 1 device pixel, that is, a dot on the screen.

For print devices and high resolution screen displays, the value of 1 CSS pixel equals multiple device pixels. The number of device pixels that a CSS pixel is equal to is calculated so that the number of pixels per inch remains 96 (i.e to preserve the 1px = 1/96in ratio).

Pixels are generally good for providing a more fine-grained control over dimensions, but may not be the best choice in all scenarios, as the values they specify don’t scale as well as values specified in relative units. One advantage of using pixels is that if you set a size, length, width, or any value in pixels, the result will be generally identical in all browsers; a 14px font size will be rendered as that in all browsers and on all screens.

mm

One millimeter.

cm

One centimeter. 1cm = 10mm = 37.8px.

in

One inch. 1in = 2.54cm = 96px.

pt

One point. It is equal to 1/72 of an inch. Point is the most common physical font sizing unit outside CSS, the reason why it makes sense to use in print style sheets.

pc

One pica. It is equal to 12 points.

View this demo on the Codrops Playground

Relative Lengths

Relative lengths are specified by using a number followed by a relative length unit.
Relative length units specify a length relative to another length. Style sheets that use relative units can more easily scale from one output environment to another.

Font-relative Lengths

Font-relative lengths are calculated relative to the size of the font used, unless they are used to specify a value for the font-size property, in which case the length value will be relative to the computed font size of the element’s parent.

For example, if you want to set a font size on an element using a relative unit such as em, 1.5em would be equal to 1.5 * the font size of the element’s parent. On the other hand, if you want to set the element’s padding using a relative unit, then the value of the padding will be computed relative to the element’s font size, not its parent’s, so padding: 1.5em would be equal to 1.5 * the computed value of the font size of the element.

Using relative lengths has a lot of advantages. One of these advantages is that no matter how much the user scales the text on the page, for example, the text container would scale up or down with the text and the padding, margins, and other properties would remain proportional at all sizes, which is always better for accessibility and responsiveness of web pages.

The are four font-relative length units defined in CSS: em, ex, ch, and rem.

em

The em relative unit specifies a length relative to the element’s font size. If the unit is used to set a value on the element’s font-size, the resulting value will be relative to the computed font size value of the element’s parent.

1em is equal to the computed value of the font-size property of the element on which it is used. If the font size changes, 1em will be equal to whatever the new font size is.

For example, the rule:

h1 { line-height: 1.2em }

means that the line height of h1 elements will be 20% greater than the font size of h1 elements. On the other hand:

h1 { font-size: 1.2em }

means that the font size of h1 elements will be 20% greater than the computed font size inherited by h1 elements.

The em unit is usually used to create scalable layouts, where the element’s text and box properties need to scale as the font scales up or down to maintain readability and vertical rhythms. Common properties that are set in em are the line-height property, padding and margin, which all play an important role in setting and maintaining a balanced vertical rhythm on a page.

It is important to remember that lengths specified in em depend on the context in which they are defined. The em unit multiplies upon itself when applied to the font-size property. This means that, if you have an element, a child element inside that element, and a “grandchild” element inside the child element, and you set the font size on each of them to be 1.5em, the font size of the first element will be equal to 150% of the font size it inherits. The font size of the child element will be 150% of the resulting font size on its parent, and the font size of the grandchild will be equal to 150% of the size of the child.

View this demo on the Codrops Playground

ex

The ex length unit is based on the length of the x character of the first available font being used. An ex is defined even for fonts that do not contain an “x”. The size of the x is either specified in the font properties, calculated by the browser, or set to a value which in most cases is equal to 0.5em.

When ex occurs in the value of the font-size property, it refers to the ex of the parent element.

Example: The following sets the line height of the text to 250% of the height of the x character of the font used.

p {
    font-family: "Arial", sans-serif;
    line-height: 2.5ex;
}
                            

ch

The ch length unit is based on the width of the 0 (zero) character of the font being used.

Example: The following sets the margin of the text’s container to 10 times the width of the zero character of the text’s font.

.container {
    margin: 10ch;
}
                            

rem

The rem relative unit specifies a length relative to the root element’s (html element’s) font size. When specified on the font-size property of the root element itself, the rem unit refers to the property’s initial value.

Just like the em unit, it can be used to create better scalable layouts, without the fuss that comes with em‘s self-multiplying cascading problem explained earlier.

The rem unit is also useful in responsive designs, where it makes it easier to scale the layout up or down by simply scaling the root element’s font size up or down.

Example: The following sets the font size of all h1 elements to 250% the size of the root element’s font size. The font size of the root element itself is set to 100%, which means that it will get the default initial font size in the browser, which is usually 16px.

html {
    font-size: 100%; /* default initial font size */
}

h1 {
    font-size: 2.5rem; /* 2.5 * 16 = 40px */
}
                            

View this demo on the Codrops Playground

Viewport-Percentage Lengths

Viewport-percentage lengths are relative to the size of the initial containing block, or the viewport, which is the visible part of the document inside the browser. When the height or width of the viewport is changed, they should be scaled accordingly. At the time of writing, only Gecko-based browsers update the lengths as the viewport’s dimensions change, whether by changing the viewport size on desktops, or by switching between landscape and portrait modes on mobile devices.

Lengths based on the viewport size are great for when you want to create elements on a page that you want to occupy the entire viewport at all times. They are also great for creating fully fluid type on the web, where the font size can increase as the size of the viewport increases, or decrease as it decreases.

There are four viewport-relative unit lengths defined in CSS: vh, vw, vmin, and vmax.

Demos for these units are available at the end of this section.

vh

The vh unit is equal to 1/100 of the height of the viewport. It is equivalent to saying that 1vh is equal to 1% of the viewport’s height.

Just like the root em unit rem is based on the root element’s font size and not on the element’s parent or context, the vh unit is also based on the viewport’s height instead of on the element’s parent as it is the case with normal percentage values.

For example, the following rule will set the font size of the h2 element to 150% of the font size of its containing element:

h1{
    font-size: 150%;
}
                            

And the following rule will set the font-size of the h1 elements to be 10% of the viewport’s height. So if the viewport height is 200mm, for example, then the font size will be set to (10*200)/100 = 20mm.

h1 {
    font-size: 10vh;
}
                            

vw

The vw unit is equal to 1/100 of the width of the viewport. It is equivalent to saying that 1vw is equal to 1% of the viewport’s width. It is the same as the vh unit (read above), but based on the viewport width instead of the viewport height.

For example, the following rule will set the font size of the h2 element to 150% of the font size of its containing element:

h1{
    font-size: 150%;
}
                            

And the following rule will set the font-size of the h1 elements to be 8% of the viewport’s width. So if the viewport width is 200mm, for example, then the font size will be set to (8*200)/100 = 16mm.

h1 {
    font-size: 8vh;
}
                            

vmin

The vmin value is equal to the minimum value of the vh and vw. It takes the value of whichever of those is smaller. So 1vmin is equal to 1% of the viewport’s smaller dimension.

Example: the following rule sets the font size of the h1 elements to 10% of the smaller of the two viewport dimensions:

h1 {
    font-size: 10vmin;
}
                            

vmax

The vmax value is equal to the maximum value of the vh and vw. It takes the value of whichever of those is bigger. So 1vmax is equal to 1% of the viewport’s bigger dimension.

Example: the following rule sets the font size of the h1 elements to 10% of the bigger of the two viewport dimensions:

h1 {
    font-size: 10vmax;
}
                            

Play with the values of the following demo to see how viewport-percentage units are applied to an element.
View this demo on the Codrops Playground

Transitioning <length>s

Lengths are real numbers followed by length units. Because of this fact, a length value can be transitioned (in transitionable properties) from an initial value to a final value by interpolating the values as real, floating-point numbers. The speed at which a length is transitioned is specified in a timing function.

The following is a live demo showing how the width and height of an element can be smoothly transitioned. Hover over the element to see its dimensions, which are <length> values, transition from one value to another.

View this demo on the Codrops Playground

Trivia & Notes

With a lot of CSS length units, it may occur to one’s mind that maybe some units are specific to certain properties, but they’re not. The units have nothing to do with the properties, but they do have to do with the output media: screen or paper.

There is no restriction on which units can be used where. If a property accepts a value in px it also accepts a value in inches or centimeters. But in general you would use a different set of units for display on screen than for printing on paper. The following table gives the recommended use:

Source: http://www.w3.org/Style/Examples/007/units.en.html

	Rec­om­mended	Oc­ca­sional use	Not rec­om­mended
Screen	em, px, %	ex	pt, cm, mm, in, pc
Print	em, cm, mm, in, pt, pc, %	px, ex