CSS Measurement Unit

CSS supports number of measurement units. These units can be absolute such as pixels, points as well as relative unit such as percentages (%) and em units.

We need these values while specifying various measurements in our style rules e.g. border = “1px solid #999999”. Here 1px specify 1 pixel of absolute unit in terms of border.

Style sheets that use the relative units such as em or percentage (%) can more easily scale from one to another output environment.


Relative Length Unit

These units are good to style the responsive site because they scale relative to the window size or the parent. They specify the length, which is relative to another length property.

Depending on the device, if the size of the screen varies too much, then the relative length units are the best because they scale better between the different rendering mediums. We can use the relative units as the default for the responsive units. It helps us to avoid update styles for different screen sizes.

UnitDescription
emCurrent font-size
exx-height of the current font
chSimilar to the unit ex, but instead of using the height of the letter x, it measures the width of the integer “0” (zero).
remFont-size of the root element
vhRelative to the height of the viewport.
1vh = 1% or 1/100 of the height of the viewport.
vwRelative to the width of the viewport.
1vw = 1% or 1/100 of the width of viewport
vminRelative to the smaller dimension of the viewport.
1vmin = 1% or 1/100 of the viewport’s smaller dimension.
vmaxRelative to the larger dimension of the viewport.
1vmax = 1% or 1/100 of the viewport’s larger dimension.
%Measure as a percentage that is relative to another value.

Using em unit

A measurement of 1em is equal to the computed value of the font-size property of the element on which it is used. It can be used for vertical or horizontal measurement.

For example, if font-size of the element set to 16px and line-height set to 2.5em then the calculated value of line-height in pixel is 2.5 x 16px = 40px.

Input:-

Index.html	
<body>
	 <p> Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
</body>

Style.css
p {
    font-size: 16px;
    line-height: 2.5em;
	   background: #cccccc;
	   width: 800px;
}

Output:-

The exception occurs when em is specified in the value of font-size property itself, in that case it refers to the font size of the parent element.

So, when we specify a font size in em, 1em is equal to the inherited font-size. As such, font-size: 1.2em; makes the text 1.2 times larger than the parent element’s text.

Input:-

Index.html	
<body>
	 <p> Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
</body>

Style.css

body {
    font-size: 62.5%;
}
p {
    font-size: 2.5em;
	   background: #cccccc;
    width: 800px;
}

Output:-

The default size for the fonts in all modern browsers is 16px. Our first step is to reduce this size for the entire document by setting the body font-size to 62.5%, which resets the font-size to 10px (62.5% of 16px). So, font-size for paragraph attribute is 2.5em (10 * 2.5 = 25px).


Using ex unit

The ex unit is equal to the x-height of the current font.

The x-height is so called because it is often equal to the height of the lowercase ‘x’, as illustrated below. However, an ex is defined even for fonts that do not contain an ‘x’.


Absolute Length Unit

These are the fixed-length units, and the length expressed using the absolute units will appear as exactly that size. It is not recommended to use on-screen, because the size of the screen varies too much. So, these units should be used when the medium of output is known to us such as in the case of print layout.

Absolute units are useful when the responsiveness is not considered in a project. They are less recommended for the responsive sites because they do not scale when the screen changes.

Generally, absolute lengths are considered to be the same size always.

UnitNameExplanation
cmCentimetersIt is used to define the measurement in centimeters.
mmMillimetersIt is used to define the measurement in millimeters.
inInchesIt is used to define the measurement in inches.
1in = 96px = 2.54cm  
ptPointsIt is used to define the measurement in points.
1pt = 1/72 of 1 inch.  
pcPicasIt is used to define the measurement in picas.
1pc = 12pt so, there 6 picas is equivalent to 1 inch.  
pxPixelsIt is used to define the measurement in pixels.
Input:-

Index.html	
<body>
	<h1>Heading 1</h1>
	<h2>Heading 2</h2>
	<h3>Heading 3</h3>
	<h4>Heading 4</h4>
	<h5>Heading 5</h5>
	<h6>Heading 6</h6>
</body>

Style.css

h1 { margin: 0.5in; }       /* inches  */
h2 { line-height: 3cm; }    /* centimeters */
h3 { word-spacing: 4mm; }   /* millimeters */
h4 { font-size: 12pt; }     /* points */
h5 { font-size: 1pc; }      /* picas */
h6 { font-size: 12px; }     /* picas */

Output:-