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 number50has a suffixpxi.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.

Height: 2pxHeight: 2cmHeight: 2inHeight: 2pt

The following table contains all the types of absolute units:

UnitDescriptionEquivalent valueExamplemmRefers to millimeter, it is used to specify the measurements in millimeters.1mm = 1/10th of 1cmfont-size: 10mm;cmRefers to centimeter, it is used to specify the measurements in centimeters.1cm = 37.8px = 25.2/64infont-size: 5cm;QRefers to Quarter-millimeters, it is used to specify the measurements in centimeters.1Q = 1/40th of 1cmfont-size: 5Q;inRefers to inches, it is used to specify the measurement in inches.1in = 2.54cm = 96pxfont-size: 1in;ptRefers to point, it is used to specify the measurements in points.1pt = 1/72 of 1infont-size: 20pt;pcRefers to picas, it is used to specify the measurement in picas.1pc = 1/6th of 1inwidth: 6pc;pxRefers to pixels, it is used to specify the measurement in pixels.1px = 1/96th of 1infont-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:

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.

Height: 3emHeight: 3exHeight: 3lhHeight: 3vh

The following table contains all the types of relative units:

UnitDescriptionExampleemRelative to the font-size of the element.font-size: 4em;exRelative to the x-height of the current font.font-size: 4ex;chRelative to width of the “0”.font-size: 4ch;remRelative to font-size of the root element.font-size: 2rem;lhIt is relative to the line height of the element.font-size: 4lh;rlhIt is relative to the line height of the root element.font-size: 4rlh;vhIt is relative to the height of the viewport. 1vh = 1% or 1/100 of the height of the viewport.font-size: 4vh;vwIt is relative to the width of the viewport. 1vw = 1% or 1/100 of the width of viewport.width: 4vw;vminIt is relative to the smaller dimension of the viewport. 1vmin = 1% or 1/100 of the viewport’s smaller dimension.width: 4vmin;vmaxIt is relative to the larger dimension of the viewport. 1vmax = 1% or 1/100 of the viewport’s larger dimension.width: 4vmax;vbIt 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;viIt 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, svhIt 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, lvhIt 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, dvhIt 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:

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 freeCSS - PX to EM Converter.