CSS: Units

, 2013-09-02

This page is a list of CSS units. Unit can be used for any element that takes a length, ⁖ width, height.

The most used are:

unit	meaning
`%`	percentage (usually relative to the parent's size)
`px`	pixel

For font sizing, the best unit is em. Don't use pt or pc.

unit	meaning
`em`	em is the current font size. `0.5 em` means half of current font size. “current” is current element's font, and ultimately it's the browser's default font size in preference.
`ex`	Height of the letter x of current font. Typically about half of em.
`pt`	1/72 inch. (0.3527 millimeter). “pt” stands for “point”.
`pc`	same as `12 pt`. “pc” stands for “pica”.

Here's a example:

div.xyz {margin:.5em;width:550px;height:90px}

The following are physical units.

Avoid using physical units, because:

① browsers typically do not have accurate info about screen's density. So, if you want something to be 1 centimeter, browser may not get it right. This is especially true on phones or tablets, because they usually redefine the meaning of pixel for the whole page. 〔☛ Phone ＆ Tablet Screen Density Comparison〕
② it's not good to specify a exact size, because it'll be hard for your page to display well on devices of different sizes, from small phones to large monitor.

However, physical unit is useful for specifying printed style. For example:

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

2013-09-02 thanks to Brennan Young