The Lengths of CSS

There are quite a few properties in CSS that take a length as a value. The box model properties are the obvious ones: width, height, margin, padding, border. But plenty of others as well: the offset and sizing of a box-shadow or the size and spacing of fonts. What are all the accepted "length" properties in CSS? There are quite a few.

- The Absolute Lengths

- The Relative Lengths

- The Viewport Percentage Lengths

- Odd Ball Out

The Absolute Lengths

- px

- pt

- pc

- in

- cm

- mm

px

Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal to one dot on the computer screen (the smallest division of your screen’s resolution). Many web designers use pixel units in web documents in order to produce a pixel-perfect representation of their site as it is rendered in the browser. One problem with the pixel unit is that it does not scale upward for visually-impaired readers or downward to fit mobile devices.

The Absolute Lengths

.wrap {
  width: 400px;
}

The Absolute Lengths

pt

A point is a physical measurement equal to 1/72 of an inch. Points is the most common way to size type outside of CSS (likely why it is supported in CSS). It's still common in language "Of course they set this important information in tiny eight point type!".

Points make the most sense in print stylesheets for sizing type, where physical media in involved, but there is nothing preventing you from using pt for screen media or anywhere else a length is accepted.

Notable browser support issues: There used to be big differences in on-screen rendering of pt size.

.wrap {
  width: 120pt;
}

The Absolute Lengths

pica

The same story as points, only 1pc == 12pt.

.wrap {
  width: 12pc;

in

inches are a physical measurement, but in CSS land, they just map directly to pixels. Feel free to chime in with use cases in the comments and I'll add them here, but I have never seen a practical use case for this or the rest of these physical measurements.

The Absolute Lengths

/* 1in == 96px */
 
.wrap {
  width: 4in; /* 384px*/
}

cm

For most of the world, centimeters are more familiar and useful as a physical measurement. They also just map to pixels.

The Absolute Lengths

/* 1cm == 37.8px */
 
.wrap {
  width: 20cm; /* 756px */
}

mm

And an order of magnitude smaller...

The Absolute Lengths

/* 1mm == 0.1cm == 3.78px */
 
.wrap {
  width: 200mm; /* 756px*/
}

The Relative Lengths

- em

- rem

- ex

- ch

em

The “em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 60pt, etc. Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature.

The Relative Lengths

/* 1em == 16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm */
 
.wrap {
  width: 40em; /* 640px*/
}

rem

A relative unit, like em, but it is always relative to the "root" element (i.e. :root {}) rather than using the cascade like em does. This vastly simplifies working with relative units.

Notable browser support issues: doesn't work in IE 8, Safari 4, or iOS 3.2.

The Relative Lengths

.wrap {
  width: 40rem;
}

ex

This is a measurement based on the x-height of the current font. Sometimes that comes from information embedded in the font itself, sometimes browser figure it out by measuring a lower case glyph, and worst case, it's set to 0.5em. It is named "x" height because it is supposedly based on the height of the x character. To understand x-height, think of a lowercase character that as a bit that sticks up (ascender) like a lowercase "d". The x-height doesn't include that ascender, it is the height of the lower loop part of that character.

Unlike ems, which don't change when you change the font-family, ex units do change when you change the font-family, as the value of one unit is specifically bound do that font.

The Relative Lengths

.wrap {
  width: 60ex;
}

ch

his is similar in spirit to x-height, only ch is based on the width of the zero (0) character instead of the height of the x character. It also changes as the font-family changes.

Notable browser support issues: IE 9+, no Android default browser.

The Relative Lengths

.wrap {
  width: 60ch;
}

The Viewport Percentage Lengths

- vw

- vh

- vmin

- vmax

vw

This is the "viewport width" unit. 1vw is equal to 1% of the width of the viewport. It is similar to percentage, except that the value remains consistant for all elements regardless of their parent elements or parent elements width. A bit like how rem units are always relative to the root.

Sizing type is the major use case here.

Notable browser support issues: No support in any mobile browsers except the very latest iOS 6. This goes for all the viewport related length units.

The Viewport Percentage Lengths

.wrap {
  width: 10vw;
}

vh

This is the same as the vw (viewport width) unit only it is based on the viewport height instead.

The Viewport Percentage Lengths

.wrap {
  height: 10vh;
}

vmin

This value will be whichever is smaller at the moment, vw or vh. In the standard use case of sizing type, this may be a more useful metric than vw or vh on their own in determining true screen size.

The Viewport Percentage Lengths

.wrap {
  width: 20vmin;
}

vmax

This value will be whichever is larger at the moment, vw or vh.

Notable browser support issues: WebKit based browsers support vmin but not vmax (yet). Firefox does support vmax though.

The Viewport Percentage Lengths

.wrap {
  width: 20vmax;
}

Odd Ball Out

- percentage

Percentage

A length set in percentage is based on the length of same property of the parent element. For example, if an element renders at 450px width, a child element with a width set to 50% will render at 225px.

Trivia: percentage isn't technically a length unit, but I'm including it here since it is so related.

Odd Ball Out

.wrap {
  width: 50%;
}

Meet the Units

There are a lot more absolute and relative units of measurement than those mentioned here. However, these four ex. point, pixels, percentages, and em units—are the most popular and the ones we’re going to primarily use.

- Pixel (px)

- Point (pt)

Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.

- ems (em)

- Percentages (%)

The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.

End

https://css-tricks.com/the-lengths-of-css

The Lengths of CSS

By Arther ZnO

The Lengths of CSS

Arther ZnO

znoxii.com