CSS: Units
There are 2 types of length units: “relative” and “absolute”.
Relative Units
Relative units → a length relative to some element's length. (for example, with respect to inherited value or browser default).
The default font size in browsers is 16px. That is, by default, 1rem is 16px.
Absolute Units
Absolute units → fixed in relation to each other.
There are 2 types of absolute units.
- ① “physical” units {
in,cm,mm,pt,pc}. - ②
px
Relative Units
| unit | meaning |
|---|---|
em | Length equal to the current font size. (see detail below) (Note: it is NOT the width of “M”.) |
ex | A font's “x-height”, usually the height of the letter x. Typically about half of em. |
rem (CSS3) | Length equal to the computed value of font-size on the root element. When specified on the font-size property of the root element, the rem units refer to the property's initial value. |
ch (CSS3) | Length roughly equal to the width of the 0 (ZERO) character in the current font. Roughly half of em. |
The length of em is:
emunit is equal to the computed value of thefont-sizeproperty of the element on which it is used.- when
emoccurs in the value of thefont-sizeproperty itself, it refers to the font size of the parent element. - When specified for the root of the document tree (For example,
<html>),emandexrefer 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?〕
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.
from http://dev.w3.org/csswg/css-values/#font-relative-lengths as of
Syntax and basic data types#length-units
For font sizing, the best unit is em or rem. Don't use pt or pc.
Sample use:
div.xyz {margin:.5em;width:550px;height:90px}
Percent Value
Note: for properties that requires a length, you can also use %. As in width:5%. But it's not technically a 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
Absolute Length Units
Absolute Length Units have fixed ratio to each other.
| unit | meaning | conversion |
|---|---|---|
cm | centimeter. 10 mm | ~0.3937 inch; ~37.795 px |
mm | millimeter. 0.1 cm | ~3.78 px |
| unit | meaning | conversion |
|---|---|---|
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 |
| unit | meaning | conversion |
|---|---|---|
px | A “reference pixel”. Equivalent to 0.75pt. (or, think of 96dpi screen.) | 0.2645 mm |
If absolute Length Units have fixed ratio to each other, then it's circular, what's their actual length?
CSS spec says it depends.
- For printed media (paper), they are based on
cm. That is, one CSScmis 1 physical centimeter. - For screen, CSS spec says it should be based on
px. A CSSpxis is basically 1/16th of the default font size.
Here's the CSS 2.1 spec. Syntax and basic data types#length-units, quote:
For a CSS device, these dimensions are either anchored (i) by relating the physical units to their physical measurements, or (ii) by relating the pixel unit to the reference pixel. For print media and similar high-resolution devices, the anchor unit should be one of the standard physical units (inches, centimeters, etc). For lower-resolution devices, and devices with unusual viewing distances, it is recommended instead that the anchor unit be the pixel unit. For such devices it is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel.
For detail about pixel, see: CSS: What's a CSS Pixel? What's Reference Pixel?.
Units like cm is useful for specifying printed style. For example:
@media print { table {font-size: 4 cm} }
thanks to Brennan Young
〔►see CSS: Media Query (Responsive Design)〕
What's CSS's Default Unit?
CSS doesn't have a default unit. Omitting unit does not default to px. See: What's CSS's Default Unit?
CSS3 Units: root em 「rem」 and viewport width 「vw」
CSS3 introduced the unit rem, which stand for “root em”. It is the size of font relative to root. (em is size of font relative to parent element.)
as of , all latest versions of browsers support it. (not Internet Explorer 8 or before.)
CSS3 also has vw and others.
| 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
http://dev.w3.org/csswg/css-values/#font-relative-lengths