Units of measure in CSS - Absolute and relative lengths

Measurement of units is expressed under abbreviations in: in, cm, mm, pt and pc for absolute lengths. And em, ex and% for relative.

Units of measure in CSS - Absolute and relative lengths | Learn CSS | Measurement of units is expressed under abbreviations in: in, cm, mm, pt and pc for absolute lengths. And em, ex and% for relative

Length measures can be expressed in positive or negative numerical values.

Although it must be taken into account that certain properties only positive values are accepted. The value itself is usually indicated, generally, together with a unit. The unit immediately follows the value (without white space), expressed, as a rule, by abbreviation of one or two letters, for example mm for millimeters or px for pixels.

An exception is the properties that support numerical values without unit indication, for example z-index (describe a position on the Z-coordinate axis) or line-height (describe a factor). Neither the value 0 (zero) is necessary to add any unit.

It is very important to distinguish between absolute and relative length values. The absolute units always indicate a fixed length, while with the relative units the length is always calculated in relation to other elements.

Among the absolute units are the inch (in), the centimeter (cm), the millimeter (mm), the point (pt) and the pica (pc). It is not advisable to use absolute units since their transmission to the monitor or other device is, at least, vague. The biggest disadvantage, however, is that, in many cases, the user cannot influence those values (also depending on the browser). For example, font sizes defined with absolute values can not normally be modified.

Among the relative units are:

  • The height EM (em).

The font size of the element.

  • The height X (ex)

The font size relative to x of the defined source.

  • The pixel (px)

Length and width data referring to the screen resolution; the pixel is not advisable as a unit, since the 96 dpi (or ppp) declared by the CSS norm is very rarely met. Therefore, the size of a pixel can vary considerably depending on the size and resolution of the monitor. In addition, the lengths indicated on this unit cannot be scaled.

Some properties also accept percentage values (%). In this case, it is necessary to pay attention to which element the calculation refers to correspondingly, for example, to the immediately superior element, or to the visible surface of the screen (Viewport).

In practice, the units with the best results have been the MS and the percentage. They are more reliable and calculable. The use of EM is more flexible, since it also allows decimals to be indicated (for example 2.75em), while the percentage values, or their fractions, are difficult to calculate.

Did you like it or was it useful?

Help us share it in Social Networks

Professor at the University of Guadalajara

Hugo Delgado Desarrollador y Diseñador Web en Puerto Vallarta

Professional in Web Development and SEO Positioning for more than 10 continuous years.
We have more than 200 certificates and recognitions in the Academic and Professional trajectory, including diploma certificates certified by Google.


Not finding what you need?

Use our internal search to discover more information
Sponsored content:

Leave your Comment


Your business can also appear here. More information