CSS Primer for Lightning Developers: CSS Units for Length Measurement

CSS supports an assortment of units for measuring length. Some units are absolute, some are relative to the length of other values.

Length is expressed as a number value followed by a unit of measurement, an example of an absolute value being 16px, or a relative value being 1em.

Absolute Length Units

Absolute length CSS units are used to represent fixed, physical lengths. Some units, such as the px and pt unit, are relative to physical lengths. The px unit can also be relative to the output device, where 1px can equal one device pixel. The pica, or pc unit, is relative to pt units even though it is considered an absolute length.

Absolute lengths are great to use when you know the exact dimensions of where your content will be output, such as a printer, but for Lightning Components and Applications, you will be better suited to use relative units more times than not.

This is because there is no way to anticipate the pixel density of the devices that will be interacting with your components, and your goal as a Lightning developer is to create responsive applications that are agnostic to the device in which they are displayed.

Absolute lengths can be measured by the following units:

  • mm – One millimeter
  • cm – One centimeter (equivalent to 10mm)
  • in – One inch (equivalent to 2.54cm)
  • px – One pixel (equivalent to 1/96 of an inch)
  • pt – One point (equivalent to 1/72 of an inch)
  • pc – One pica (equivalent to 12 points)

Relative Length Units

Relative length CSS units are used to represent lengths relative to other length values. This allows you to easily make elements smaller or larger than reference elements without having to hardcode specific length values.

Relative length units, for all intents and purposes, break down into two categories – units that are relative to a font size, and units that are relative to the viewport size.

Units Relative to Font Size

The most commonly used relative units calculate length based on the font size of an element. Other more esoteric units calculate length based on the size of specific characters within a font.

The units relative to font size include:

  • em – This is the most common relative unit and the one you should become most familiar with, as it will help you create the most scalable layouts for your components. For any property other than the font-size property itself, em is a multiple of the font-size of the current element, with 1em being equivalent to the font-size of the current element. For example, if the font-size of an element is 10px, then 1em would equal 10px, 0.5em would equal 5px, 2em would equal 20px, and so on. If no font size is specified, 1em is equal to 16px, or 12pt.
  • rem – Very similar to em, the rem unit is also a multiple of font-size, but instead of being relative to the current element (or the parent element in the case of the font-size property itself), rem calculates length relative to the root element of the HTML document. If you prefer to have everything in your components scale perfectly from a single value rather than from cascading values, rem may be a better option for you than em.
  • ex – This is one of the esoteric units mentioned above, and it is not commonly used. Known as a typographic measurement, ex is relative to the x-height of the current font – literally the height of the “x” character contained in the font. If there is no “x” character, ex defaults to 0.5em.
  • ch – Another fairly esoteric unit that is not commonly used, ch is similar to ex in that it is a typographic measurement, but in this case it is based on the width of the “0” (zero) character of a font.

If an em unit is used on the actual font-size property, the value is calculated based on the inherited font-size of the parent element.

Units Relative to Viewport

While having units relative to the percentage of the viewport (the visible area of a document in a browser) makes logical sense for specifying length values for elements that make up the layout of a page, in practical terms these units have not been widely adopted and I am only going to give them a brief mention for the sake of reference:

  • vw – The “viewport width” unit. 1vw is the equivalent of 1% of the viewport width
  • vh – The “viewport height” unit. 1vw is the equivalent of 1% of the viewport height
  • vmin – The smaller of the vw or vh values
  • vmax – The larger of the vw or vh values
Mike Topalovich
Hi, I’m Mike. I help companies like yours do business in new ways with Salesforce.

I am a freelance Salesforce Developer, Architect, and CTO as well as a part time instructor for Salesforce University.

Connect with me today to discuss how I can become a part of your team on an ongoing retainer basis.
Mike Topalovich on EmailMike Topalovich on FlickrMike Topalovich on LinkedinMike Topalovich on RssMike Topalovich on Twitter

Leave a Reply