CSS: Units
Summary of CSS length unit:
%
- percent. Relative to parent tag. Exact meaning depends on the tag it is used.
px
- pixel. 1/16 of default font size.
vw
- 1% of the view port width.
vh
- 1% of the view port height.
vmin
- smaller of vw or vh
vmax
- larger of vw or vh
rem
- root (default) font size.
ch
- width of 0 of current font.
em
- relative to font size of parent.
ex
- height of lowercase letter x. About half of em, depending on font.
cm
- center meter.
mm
- millimeter
in
- inch
pt
- 1/72 of a inch
pc
- 1/6 of a inch
Note, there must be no space before the CSS unit, and a unit is required, except when the value is 0, else it's syntax error.
Example:
div {margin:1rem}
Percent Value
%
is percentage.
Example:
div {width:5%}
Percentage is not technically considered a “length unit”.
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
[see HTML: the Root Element]
Tip: don't use percentage value, because its meanings is complex.
Use
vw
, vh
, vmin
, vmax
instead.
px, Reference Pixel

px
is defined as “reference pixel”, which is a visual angle of 0.0213 degrees.
This means, the larger the screen, the larger is 1px
.
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
The length of rem
is:
The
computed value
of font-size
of the
Root Element
.
When used as value on font-size
property of the
Root Element,
rem
refer to the property's initial value. (in browsers, it's 16px
).
Tip: think of rem as the default font size, and it's basically always 16px.
em
The length of em
is:
em
is equal to the computed value of thefont-size
property of the element on which it is used. For example, if you saymax-width:50em
on a paragraph, it means, 50 times the computed value offont-size
property of the paragraph.- If
em
occurs in the value of thefont-size
property itself, it refers to the computed value offont-size
of the parent element. - If used on the Root Element,
1em
equals to thefont-size
property's initial value (which is16px
).
ex, x-height
ex
is equal to current 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]
ch
ch
is equal to the box width of the digit 0 (ZERO) character of the current font. It is about the same as half of em
.
[“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.
[From CSS 2.1 Specification, 2011]
Syntax and basic data types#length-units
vw, vh, vmin, vmax
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.
One great use of
vw
is to specify height as a percentage of width. You can't do this with percentage.
[see CSS: Fixed Aspect Ratio]
In fact, it's useful to replace almost all percentage length by vw
, because the meaning of percentage is different for each CSS property.
cm, mm, in, pc, pt
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.
You can omit unit only when the value is 0.