Length Values and their Units - An Inquiry Into Values - HTML with Style

An Inquiry Into Values

Length Values and their Units

Length values are used to specify a length in a property. Examples of their use include the font-size and text-indent properties, where they specify the length from the baseline of the font to the top of the font and the length of the indent of the first line respectively.

Length units consist of a number followed by a unit, such as 1cm, +1.5em, -4in, 14pt etc. The number may be an integer or a real number, and it might be positive or negative, although some properties limit the range of numbers that can be used (for instance, you can't have a negative font size). The various types of units offer a lot of flexibility in specifying lengths of various quantities. There are two types of units: absolute and relative units.

Absolute Units

Absolute units are the following:

in: inches, one inch = 2.54 centimeters
cm: centimeters
mm: millimeters
pt: points, one point = 1/72 of an inch
pc: picas, one pica = 12 points

The user agent is supposed to figure out the actual length of these units depending on the medium used. If it is a printer, this is pretty simple, but on a computer screen, it is not always simple. Many operating systems do have a way of specifying the resolution of the display (usually expressed in dpi, dots per inch), but this is not always possible. Most of the time, however, a reasonable value can be figured. These units are very good for specifying lengths, since a document will usually be displayed in a space of the same approximate proportions.

Also note that the definition of a point used in CSS (1/72 of an inch) is not in agreement with all of the publishing world, but still it is the one used in CSS. Publishers have various different definitions of a point, and the matter of which is more correct is quite a long debate, but this is the value used in CSS, so you shouldn't have to worry about it too much.

Relative Units

There are three types of relative units: em, ex and px. em refers to the font height of the element. So, text-indent: 2em means make the indent equal to twice the font height. The only exception to this rule is when ems are used to specify the font size itself, in which case they refer to the inherited font size, so font-size: 1.2em is equivalent to font-size: 120%. Ems are probably the most useful unit in CSS, because they give an indication of how much space the document is occupying. Font sizes will always be at a readable size, so you can scale other measurements (such as margins) to match the size that your viewer is comfortable.

An ex is equal to the font's "x-height," which is normally defined as the height of the character x. This value is defined even if the font doesn't have an x character, and is an approximate indication of the height of characters without ascenders or descenders. In many traditional fonts, an em is about one and a half ex, but this can vary greatly depending on the font. Some more unusual fonts might have very small ex values compared to font size. Note that these definitions, much like the definition of the point, will probably launch several publishers into a day-long debate if you ever mention them, but they work in CSS and these are the ones browsers should use.

A px is a pixel, but it is not an absolute length. In a computer display, a pixel should correspond to one physical pixel on the screen, but when, for instance, printing a document, pixels should be scaled accordingly (since the resolution of a printer is typically much higher than that of a computer screen, and lengths measured in px would be tiny). Still, it is generally a bad idea to use px for length measurements in CSS, since the resolution of the medium the user is using can vary greatly. A length measured in px will be very different for someone using a 15" monitor at 1024x768 resolution than to someone using a 21" monitor at 640x480 resolution, while other units will scale well to what the user expects.

As with percentages, note that all elements inherit the computed values of their parents, not the specified relative values.

Integers and Real Numbers

Certain values also accept integers or real numbers as values. These can be positive or negative, although many values restrict the range of values that can be accepted. An example is the font-weight property, that accepts integer values that are multiples of 100, ranging from 100 to 900. Another example is the line-height property, that accepts positive real numbers.

The `inherit` Value

Every property may have a value of inherit, which indicates that the element should inherit this property from its parent. This is normally the default for inherited properties, but the inherit value applies to non-inherited properties as well, so you can force a property to be inherited.

URL: https://www.webreference.com/html/tutorial8/
Created: Oct 30, 1998
Revised: Nov 4, 1998