CSS - Units

CSS Units define the measurement system used to specify the values. CSS offers a number of different units for expressing length and measurement. CSS unit is used to specify the property size for a page element or its content.

There are a number of ways to specify and measure length in CSS. It is used to specify margins, padding, font size, width, height, border, etc.

For example - font-size: 50px, here number 50 has a suffix px i.e., pixel, it is a CSS measurement unit.

There should be no whitespace between the number and the unit. The unit can be left out when the value is 0.

Length Units

Length units can be categorized into two types:

Absolute units: Fixed unit lengths that does not depend on screen width.
Relative units: Responsive unit lengths that changes according to screen width.

Absolute Length Units

These units are categorized as fixed-length units, which means that lengths specified with absolute units maintain an exact, unchanged size on the screen.

These units prove to be very effective when the browser has comprehensive information about the properties of the screen, the printer being used, or other appropriate user agents.

The following table contains all the types of absolute units:

Unit	Description	Equivalent value	Example
mm	Refers to millimeter, it is used to specify the measurements in millimeters.	1mm = 1/10th of 1cm	font-size: 10mm;
cm	Refers to centimeter, it is used to specify the measurements in centimeters.	1cm = 37.8px = 25.2/64in	font-size: 5cm;
Q	Refers to Quarter-millimeters, it is used to specify the measurements in centimeters.	1Q = 1/40th of 1cm	font-size: 5Q;
in	Refers to inches, it is used to specify the measurement in inches.	1in = 2.54cm = 96px	font-size: 1in;
pt	Refers to point, it is used to specify the measurements in points.	1pt = 1/72 of 1in	font-size: 20pt;
pc	Refers to picas, it is used to specify the measurement in picas.	1pc = 1/6th of 1in	width: 6pc;
px	Refers to pixels, it is used to specify the measurement in pixels.	1px = 1/96th of 1in	font-size: 15px;

Absolute units prove valuable for projects where responsiveness is not a priority. However, they are less beneficial for responsive websites because they do not adjust when screen dimensions change.

Example

Here is an example of absolute units (mm, cm, in, Q) used for font sizes:

<html>
<head>
    <style>
        .unit-mm {
            font-size: 5mm;
        }
        .unit-cm {
            font-size: 1cm;
        }
        .unit-inch {
            font-size: 0.5in;
        }
        .unit-quarter {
            font-size: 40Q;
        }
    </style>
</head>

<body>
    <h1 class="unit-mm"> Font size 5mm </h1>
    <h1 class="unit-cm"> Font size 1cm </h1>
    <h1 class="unit-inch"> Font size 0.5inch </h1>
    <h1 class="unit-quarter"> Font size 40Q </h1>
</body>
</html>

Relative Length Units

Relative length units are measured in relation to other elements or viewport of the screen.

Relative units are great for styling responsive websites because they can be adjusted proportionally based on window size or parent elements. These units define lengths relative to other length properties.

The following table contains all the types of relative units:

Unit	Description	Example
em	Relative to the font-size of the element.	font-size: 4em;
ex	Relative to the x-height of the current font.	font-size: 4ex;
ch	Relative to width of the "0".	font-size: 4ch;
rem	Relative to font-size of the root element.	font-size: 2rem;
lh	It is relative to the line height of the element.	font-size: 4lh;
rlh	It is relative to the line height of the root element.	font-size: 4rlh;
vh	It is relative to the height of the viewport. 1vh = 1% or 1/100 of the height of the viewport.	font-size: 4vh;
vw	It is relative to the width of the viewport. 1vw = 1% or 1/100 of the width of viewport.	width: 4vw;
vmin	It is relative to the smaller dimension of the viewport. 1vmin = 1% or 1/100 of the viewport's smaller dimension.	width: 4vmin;
vmax	It is relative to the larger dimension of the viewport. 1vmax = 1% or 1/100 of the viewport's larger dimension.	width: 4vmax;
vb	It is relative to the size of the initial containing block in the direction of the root element's block axis. 1vb = 1% of containing block's size (block axis).	font-size: 4vb;
vi	It is relative to the size of the initial containing block in the direction of the root element's inline axis. 1vb = 1% of containing block's size (inline axis).	font-size: 4vi;
svw, svh	It is relative to the width and height of the smaller viewport. 1svw = 1% or 1/100 of the smaller viewport's width and 1svh = 1% or 1/100 of the smaller viewport's height.	width: 40svw; height: 40svh;
lvw, lvh	It is relative to the width and height of the larger viewport. 1lvw = 1% or 1/100 of the larger viewport's width and 1lvh = 1% or 1/100 of the larger viewport's height.	width: 40lvw; height: 40lvh;
dvw, dvh	It is relative to the width and height of the dynamic viewport. 1dvw = 1% or 1/100 of the dynamic viewport's width and 1dvh = 1% or 1/100 of the dynamic viewport's height.	width: 40dvw; height: 40dvh;

Example

Here is an example of relative units (em, rem, vw, vh, %) used for font sizes:

<html>
<head>
    <style>
        .unit-em {
            font-size: 2em;
        }
        .unit-rem {
            font-size: 1.5rem;
        }
        .unit-vw {
            font-size: 5vw;
        }
        .unit-vh {
            font-size: 5vh;
        }
        .unit-percent {
            font-size: 150%;
        }
    </style>
</head>

<body>
    <h1 class="unit-em">Font size 2em </h1>
    <h1 class="unit-rem">Font size 1.5rem </h1>
    <h1 class="unit-vw">Font size 5vw </h1>
    <h1 class="unit-vh">Font size 5vh </h1>
    <h1 class="unit-percent">Font size 150% </h1>
</body>

</html>

Units px (Pixel) and em (indicates size relative to the size of the font) are two of the measurement units of length. In order to convert px to em, try our free CSS - PX to EM Converter.

Print Page