CSS: Units

By Xah Lee. Date: 2013-09-02. Last updated: 2018-04-15.

Example of length in your browser:

80px

5rem

5em

10ex

10ch

10vw

10vh

10vmin

10vmax

1cm

10mm

1in

72pt

6pc

96px

Note, there must be no space before the CSS unit, and a unit is required, else it's syntax error. Example:

div {margin:1em}

%, Percent Value

% is percentage.

Percentage is not technically a CSS length unit.

div {width:5%}

Meaning of percent value is dependent on the specific property.

Percentage values are always relative to another value, for example a length. Each property that allows percentages also defines the value to which the percentage refers. The value may be that of another property for the same element, a property for an ancestor element, or a value of the formatting context (e.g., the width of a containing block).

When a percentage value is set for a property of the root element and the percentage is defined as referring to the inherited value of some property, the resultant value is the percentage times the initial value of that property.

Syntax and basic data types#percentage-units

px, Reference Pixel

px is defined as “reference pixel”, which is a visual angle of 0.0213 degrees.

css reference pixel — CSS Reference Pixel

This means, the larger the screen, the larger is a pixel.

px is not the display's physical pixel size.

For a monitor with 96 dot-per-inch monitor, popular in year 1990s, px is a physical pixel.

px, in practice, is 1/16 of default font size of a device.

[see CSS: What's a CSS Pixel? What's Reference Pixel?]

rem, Root Font Size

rem → the computed value of font-size on the root element. Meaning, it is the default font size.

Effectively, 1rem is 16px.

When specified on the font-size property of the root element, the rem units refer to the property's initial value.

em, M-box Font Size

em → Length of the m-box of the font size of current element.

Note: em is NOT the width of “M” nor height.

The length of em is:

em unit is equal to the computed value of the font-size property of the element on which it is used.
when em occurs in the value of the font-size property itself, it refers to the font size of the parent element.
When specified for the root of the document tree (For example, <html>), em and ex refer to the property's initial value.

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

[see CSS: What's Computed Style?]

In practice, the length of 1em is 1rem if no parent element has changed font-size. If parent element's font-size value is increased, the length of 1em becomes larger.

font size em height — The blue box is the font size, also known as em height. The actual height of letter M, is different depending on font. 〔font_size_em_height.svg 〕

[see Meaning of Font Size and Em Height]

ex, font x-height

ex → A font's “x-height”, usually the height of the letter x. Typically about half of em, depending on current font.

Like em, the length of 1ex depends on parent's font-size.

[see Meaning of Font Size and Em Height]

ch

ch → roughly equal to the width of the digit 0 (ZERO) character of the current font. Roughly half of em.

The ch unit is from CSS3, and is not widely supported.

[“ch” is] Equal to the used advance measure of the “0” (ZERO, U+0030) glyph found in the font used to render it. In the cases where it is impossible or impractical to determine the measure of the “0” glyph, a value of 0.5em must be assumed.

Syntax and basic data types#length-units

vw, vh, vmin, vmax

unit	meaning
`vw`	Equal to 1% of the initial containing block (the view port). it does NOT include the scrollbar width. When browser window changes size, `vw` also changes.
`vh`	Equal to 1% of the height of the initial containing block.
`vmin`	Equal to the smaller of vw or vh.
`vmax`	Equal to the larger of vw or vh.

These units are not fully supported by IE11 as of 2015-03-20

cm, mm, in

unit	meaning	conversion
`cm`	centimeter. 10 mm	~0.3937 inch; ~37.795 px
`mm`	millimeter. 0.1 cm	~3.78 px
`in`	Inch. 6 pc. 72 pt. 96 px.	2.54 cm
`pc`	1/6 inch. 12 pt. 16 px. “pc” stands for “pica”.	~0.423 cm
`pt`	1/72 inch. (~0.0138 inch) ~1.33 px. “pt” stands for “point”.	0.3527 mm

Units like cm is useful for specifying printed style. For example:

@media print {
    table {font-size: 4cm}
}

[see CSS: Media Query]

What's CSS's Default Unit?

CSS doesn't have a default unit. Omitting unit is syntax error.

Reference

http://dev.w3.org/csswg/css-values/#font-relative-lengths

Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.