CSS: Units

By Xah Lee. Date: . Last updated: .

Example of length in your browser:

5%
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, except when the value is 0, else it's syntax error.

Example:

div {margin:1em}

Percent Value

% is percentage.

Percentage is not technically considered a “length unit”.

Example:

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

[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.

css reference pixel
CSS Reference Pixel

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:

ex, font 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.

typography line terms
typography line terms

[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

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

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.

Reference

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

Like it? Help me by telling your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

CSS Basics

  1. Basics
  2. Tag Matching Tutorial
  3. Selector Syntax
  4. Units

Color

  1. Color Syntax
  2. Color Names
  3. Opacity
  4. Linear Gradient
  5. Radial Gradient

Font

  1. font-family
  2. Standard Web Fonts
  3. font-size
  4. Meaning of Font Size
  5. Font Weight
  6. Chinese Font Names

Box Model

  1. Border
  2. Outline
  3. Margin vs Padding
  4. Box Sizing

Layout

  1. Layout Tutorial
  2. Display Property
  3. Position: static, relative, fixed, absolute
  4. Pure CSS Table
  5. Tabbed Menu
  6. 3 Columns Page Layout
  7. Multi-Column Layout for Text Flow
  8. Fix Element to Window
  9. Centering
  10. Flowing List
  11. z-index
  12. Text Over Image
  13. Text Flow Around Image
  14. OverFlow, Scrollbar

Transform/Animation

  1. 2D Transform
  2. Transition
  3. Animation

Line Wrap, Justification

  1. Line Wrap
  2. Text Alignment, Justification
  3. Match first-letter and first-line
  4. “:before”, “:after”
  5. Text Decoration: Underline, Overline, Line-Through
  6. Letter Spacing, Word Spacing

Box Decoration

  1. Box Shadow
  2. Text Shadow
  3. Round Corners
  4. Background Image
  5. Image Rollover

Misc

  1. Computed Style
  2. Pseudo Class vs Pseudo Element
  3. Media Query
  4. Variable
  5. calc
  6. Reset
  7. user-select
  8. Data URI Scheme
  9. protocol-relative URL
  10. Default Unit
  11. Declaring Character Set in CSS File
  12. Jargons Explained: Tag, Element, Node, Object, Attribute, Property, Method
  13. Display Table on Small Screen
  14. Fixed Aspect Ratio
  15. Add Icon to Links
  16. Progress Bar Example

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

Web Dev Tutorials