A Look at Length Units in CSS

Measuring things is as important an aspect of web design, as any other. The fact that we have at least 10 different measurement units in CSS speaks for itself.

Each unit serves its own specific purpose and makes web pages more flexible for a variety of devices. Once you become acquainted with all these units, you will be able to size your elements more precisely. In this tutorial, we will take a look at the different units that are available in CSS and I’ll discuss which units to use in which situations, and how to use them.

Absolute length units

Absolute units are a digital representation of actual measurements in the physical world. These units are not related to the size of the screen or its resolution. As a result, absolute length units are not as well suited for use on digital devices or when the resolution is not known. These units are more appropriate when you are designing for physical media such as print.

Absolute units include:

• cm (centimeters)
• mm (millimeters)
• in (inches)
• pc (picas)
• pt (points)
• px (pixels)

Note that the editor’s draft of the spec also includes the quarter-millimeter (q) unit, but this is new and doesn’t seem to have any browser support.

You might observe that while using absolute lengths there are differences between the same values of a particular unit on different screens. This is because of the difference in the DPI (dots per inch) for a screen. Higher resolution screens have a higher DPI compared to smaller resolution screens, thus making the image or text look smaller.

The most widely used of all absolute units is the pixel (px). A pixel is a single dot on the screen. It is the smallest unit of measurement and usually the unit used as a benchmark for the other units.

Other units like inch, millimeter, and centimeter represent the physical size of these units. The point (pt) unit represents 1/72 of an inch and the pica (pc) represents 1/6 of an inch. Here is some CSS that makes use of the six common absolute units:

[code language="css"]
p {
border-top: 0.5in solid blue;
border-bottom: 18mm solid green;
border-left: 1cm solid red;
border-right: 40px solid black;
letter-spacing: 0.4pc;
font-size: 20pt;
}
[/code]

This CodePen demo shows the above code in action:

See the Pen Demo using different absolute units in CSS by SitePoint (@SitePoint) on CodePen.

Relative length units

Relative units, as the name suggests, don’t have fixed values. Their values are relative to some other predefined value or feature. Relative units make it easy to properly size elements since we can relate their width, height, font-size, etc. to some other base parameter.

These units are usually recommended when you creating responsive layouts and are preferred for digital media. Their value can be relative to the fonts you are using, or to the height and the width of the view window of a screen.

Relative units include:

• ex (x-height)
• ch (character)
• em (named after print ems, but not the same)
• rem (root em)

Let’s take a look at each of these in more detail.

X-height (ex) and Character (ch) units

The ex unit is rarely used in development. 1ex is equal to the size of the lowercase ‘x’ in the font being used. In most cases, the value of 1ex is nearly equal to 0.5em. However this changes from one font to another. This unit can be considered the vertical equivalent of em.

[code language="css"]
p {
font-size: 2ex;
}
[/code]

The character (ch) unit is related to the ‘0’ character. 1ch is the advance measure of the character ‘0’ in a font.

[code language="css"]
p {
margin: 2ch;
}
[/code]

Em units

The em unit has a value equal to the font size of the base element or the parent element. For instance, if the font size of parent element is 20px then the value of 1em will compute to 20px for all immediate child elements. The font size of a child element can be increased or decreased easily based on knowledge of the base unit. The number need not be a whole number.

Using em makes it easy for us to keep font sizes of various elements in a fixed ratio. For example, if the value of font-size for a parent element is 50px, setting the font size of a child element to 2em will be the same as setting it to 100px. Similarly, setting it to 0.5em will make the font size of the child element 25px.

Continue reading %A Look at Length Units in CSS%

by Gajendar Singh via SitePoint