Loading lesson path

CSS•Reference and Practice

CSS Units

Concept visual

CSS Units

Pointer walk

two pointers

left=0

right=6

Start at both ends

Overview

CSS has several different units for expressing a length.

Formula

Many CSS properties take "length" values, such as width, margin, padding, font - size, etc.

Length is a number followed by a length unit, such as 10px, 2em, etc.

Example

Set different length values, using px (pixels):

h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}

Note:

A whitespace cannot appear between the number and the unit. However, if the value is , the unit can be omitted. For some CSS properties, negative lengths are allowed. There are two types of length units: absolute and relative.

Absolute Lengths

The absolute length units are fixed and a length expressed in any of these will appear as exactly that size. Absolute length units are not recommended for use on screen, because screen sizes vary so much.

However, they can be used if the output medium is known, such as for print layout.

Unit

Description cm centimeters

Try it mm millimeters

Formula

Try it in inches (1in = 96px = 2.54cm)

Try it px *

Formula

pixels (1px = 1/96th of 1in)
Try it pt points (1pt = 1/72 of 1in)
Try it pc picas (1pc = 12 pt)

Try it

Pixels (px) are relative to the viewing device. For low-dpi devices, 1px is one device pixel (dot) of the display. For printers and high resolution screens 1px implies multiple device pixels.

Relative Lengths

Relative length units specify a length relative to another length property. Relative length units scale better between different rendering medium.

Unit

Description em

Formula

Relative to the font - size of the element (2em means 2 times the size of the current font)

Try it ex

Formula

Relative to the x - height of the current font (rarely used)

Try it ch

Relative to the width of the "0" (zero)

Try it rem

Relative to font-size of the root element

Try it vw

Relative to 1% of the width of the viewport*

Try it vh

Relative to 1% of the height of the viewport*

Try it vmin

Formula

Relative to 1% of viewport's* smaller dimension

Try it vmax

Formula

Relative to 1% of viewport's* larger dimension

Try it

Relative to the parent element

Try it

Tip:

The em and rem units are practical in creating perfectly scalable layout!

Formula

* Viewport = the browser window size. If the viewport is 50cm wide, 1vw = 0.5cm.

Browser Support

The numbers in the table specify the first browser version that fully supports the length unit. Length Unit em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 3.5 ch 27.0 9.0 1.0 7.0 20.0 rem 4.0 9.0 3.6 4.1 11.6 vh, vw 20.0 9.0 19.0 6.0 20.0 vmin 20.0 12.0 19.0 6.0 20.0 vmax 26.0 16.0 19.0 7.0 20.0

CSS Interview Preparation

W3Schools CSS Bootcamp

Loading lesson path

Learn/CSS/Reference and Practice

CSS•Reference and Practice

CSS Units

Concept visual

CSS Units

Pointer walk

two pointers

left=0

right=6

Start at both ends

Overview

CSS has several different units for expressing a length.

Formula

Many CSS properties take "length" values, such as width, margin, padding, font - size, etc.

Length is a number followed by a length unit, such as 10px, 2em, etc.

Example

Set different length values, using px (pixels):

h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}

Note:

Absolute Lengths

However, they can be used if the output medium is known, such as for print layout.

Unit

Description cm centimeters

Try it mm millimeters

Formula

Try it in inches (1in = 96px = 2.54cm)

Try it px *

Formula

pixels (1px = 1/96th of 1in)
Try it pt points (1pt = 1/72 of 1in)
Try it pc picas (1pc = 12 pt)

Try it

Pixels (px) are relative to the viewing device. For low-dpi devices, 1px is one device pixel (dot) of the display. For printers and high resolution screens 1px implies multiple device pixels.

Relative Lengths

Relative length units specify a length relative to another length property. Relative length units scale better between different rendering medium.

Unit

Description em

Formula

Relative to the font - size of the element (2em means 2 times the size of the current font)

Try it ex

Formula

Relative to the x - height of the current font (rarely used)

Try it ch

Relative to the width of the "0" (zero)

Try it rem

Relative to font-size of the root element

Try it vw

Relative to 1% of the width of the viewport*

Try it vh

Relative to 1% of the height of the viewport*

Try it vmin

Formula

Relative to 1% of viewport's* smaller dimension

Try it vmax

Formula

Relative to 1% of viewport's* larger dimension

Try it

Relative to the parent element

Try it

Tip:

The em and rem units are practical in creating perfectly scalable layout!

Formula

* Viewport = the browser window size. If the viewport is 50cm wide, 1vw = 0.5cm.

Browser Support

CSS Interview Preparation

W3Schools CSS Bootcamp