CSS Length Dimension

sources: https://www.w3.org/Style/Examples/007/units.en.html updated 27Dec2018
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units updated 27Dec2018
https://www.w3.org/TR/css-values-4/ updated 27Dec2018

Dimension of Length

CSS only provides the unit of expression for expressing the dimension length. In general, output media can be divided into soft scalable display and hard fixed printout. Although there are a number of different units can be used, some of them may not be suitable for using in some output media because of the properties of output media.

Unit of Length

The units used for expressing length in CSS are in, cm, mm, pt, pc

Absolute Unit

An absolute unit is a hard fixed dimension, that is the dimension used in CSS is the same as everywhere eles. However the accuracy of the output is still highly depending on the resolution of the output media. For example, the output presentation may be different from a low-resolution handheld screen to a high-resolution desktop display. Therefore an absolute unit in CSS is mainly used for high-resolution display or printed output media. Document with absolute unit of hard fixed dimension is not suitable for soft scalable output media to which document with  relative unit of soft scalable dimension will work much better. The common absolute units are in, cm, mm, pt, and pc. Therelation between these absolute units is 1in=2.54cm=25.4mm=72pt=6pc.

  in

The 'in' stands for inch is a unit of length in the imperial/US unit system and is equal to 2.54cm in the metric system.

'in' equal to 25.40mm.

cm

The 'cm' stands for centimeter is a unit of length in the metric/SI unit system and is equal to one hundredth of a meter.

'cm' equal to 10.00mm

mm

The 'mm' stands for millimeter  is a unit of length in the metric/SI unit system and is equal to one thousandth of a meter.

'mm' equal to 1.00mm

Q

The 'Q' stands for quarter millimeter is the smallest measurement unit of length in CSS and is equal to one quarter of a millimeter.

'Q' equal to 0.25mm

pt

The 'pt' stands for point is the smallest measurement unit in typography and is equal to 1/72 of an inch. In order words, 72 points equal to an inch or 12 points equal to a pica.

'pt' equal to 0.35mm

pc

The 'pc' stands for pica is a typographic unit in typography and is equal to approximately 1/6 of an inch or 1/72 of a foot. In order words, 6 picas equal to an inch or a pica equals to 12 points.

'pc' equal to 4.23mm

Variable Unit

A variable unit is an abstract relative unit depending on the output media.The common variable unit is pixel. Pixel is a visual measurement unit in related to the resolution of the output media. The pixel measurement unit is usually not directly refering to the phsical dimension of the device pixel because both pixel resolution and physical dimension of the output media may not be the same. In general, a pixel refers only to a part of a physical visual dot on the output media, and the user agent will rescale the pixel unit to the corresponding value according to the pixel density of the output media by relating either the physical units to their physical measurements, or the pixel unit to the reference pixel.

px

The 'px' stands for pixel is a visual meaurement unit in visual media. A reference pixel is equal to approximately 1/96 of an inch or 0.26mm. In order words, 96 pixels equal to an inch (96dpi) or 100 pixel equals to 26mm. The reference pixel is defined by refering to an accepted standard by placing an output media with a pixel density of 96dpi at a reading distance of 28 inches with visual angle about 0.0213 degrees.

Relative Unit

A relative unit is a dimenionless measurement unit with reference to an assigned absolute reference unit. In other word, the user agent will rescale the relative unit to the corresponding value refering to the assigned absolute reference unit accordingly. The common relative units are em, ex, and rem.

em

The 'em' unit is a font-relative length unit with reference to the font-size of the current element, that is the width of the capital letter M. Font sizes are inherited by elements from their parents.

ex

The 'ex' unit is a font-relative length unit with reference to the x-height of the current element, that is the height of the lower case letter x. Font sizes are inherited by elements from their parents.

ch

The 'ch' unit is a font-relative length unit with referenece to the 0-width of the current element, that is the width of the number 0 (U+0030).  Font sizes are inherited by elements from their parents.

ic

The 'ic' unit is a font-relative length unit with referenece to the 水-width of the current element, that is the width of the number 水 (U+6C34).  Font sizes are inherited by elements from their parents.

cap

The 'cap' unit is a font-relative length unit with referenece to the nominal capitalletter height of the current element, that is the nominal height of capital letters.  Font sizes are inherited by elements from their parents.

%

The '%' unit stands for percentag and is a dimensionless ratio unit with reference to the one hundredth of the value of the current element, that is 1/100 of the value of the current element.

rem

The 'rem' unit stands for root em and is a font-relative length unit with reference to the font-size of the root base element of the document, that is the width of a capital letter M. Besides 'rem' always refer to the font-size of the base font-size only, and will ignore any inherited font sizes.

lh

The 'lh' unit is a element-relative length unit with referenece to the line height of the current element. 

rlh

The 'rlh' unit stands for root lh and is a element-relative length unit with referenece to the line height of the root element as in rem. 

vw

The 'vw' unit is a viewport-relative length unit with referenece to the one hundredth width of the viewport, that is the 1/100  of viewport width (inline axis). 

vh

The 'vh' unit is a viewport-relative length unit with referenece to the one hundredth height of the viewport, that is the 1/100  of viewport height (block axis). 

vmin

The 'vmin' unit is a viewport-relative length unit with referenece to the one hundredth of the smaller dimension of the viewport, that is the 1/100  of viewport's smaller dimension. 

vmax

The 'vmax' unit is a viewport-relative length unit with referenece to the one hundredth of the larger dimension of the viewport, that is the 1/100  of viewport's larger dimension. 

Unitless

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<link rel="stylesheet"  type="text/css" href="https://fonts.googleapis.com/css?family=IBM+Plex+Serif:300,300i,400,400i,700,700i">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {font-size:6pt; font-family: "IBM Plex Serif"}
</style>
<title>Sample Page</title>
    </head>
    <body>
M
<div>M</div>
<div style="font-size:1rem;">M</div>
<div style="font-size:6pt;background-color:cyan;"">M
<div style="font-size:1rem;background-color:yellow;width:0.167in;height:12pt"">M</div>
</div>
<div style="font-size:1em;border:1px solid black">M
<div style="font-size:12pt;background-color:cyan;width:0.167in;height:12pt">M</div>
<div style="font-size:12pt;background-color:red;width:0.334in;height:12pt">M</div>
<div style="font-size:12pt;background-color:yellow;width:24pt;height:12pt">M</div>
<div style="font-size:2em;background-color:cyan;width:2em;height:2em">M</div>
<div style="font-size:1rem;background-color:yellow;width:1rem;height:1rem">M</div>
Mx
<div style="font-size:2ex;background-color:cyan;width:2ex;height:2ex">x</div>
<div style="font-size:2ex;background-color:cyan;width:2ex;height:2ex">n</div>
<div style="font-size:1em;background-color:cyan;width:2ex;height:2ex">x</div>
<div style="font-size:12pt;background-color:cyan;width:2ex;height:2ex">M</div>
</div>
    </body>
</html>