Stats

331 Contributors: 23
2017-04-12
Licensed under: CC-BY-SA

Not affiliated with Stack Overflow
Rip Tutorial: info@zzzprojects.com

Download eBook

Length Units

Download css eBook

Introduction

A CSS distance measurement is a number immediately followed by a length unit (px, em, pc, in, …)

CSS supports a number of length measurements units. They are absolute or relative.

Syntax

  • valueunit
  • 1em

Parameters

UnitDescription
%Define sizes in terms of parent objects or current object dependent on property
emRelative to the font-size of the element (2em means 2 times the size of the current font)
remRelative to font-size of the root element
vwRelative to 1% of the width of the viewport*
vhRelative to 1% of the height of the viewport*
vminRelative to 1% of viewport's* smaller dimension
vmaxRelative to 1% of viewport's* larger dimension
cmcentimeters
mmmillimeters
ininches (1in = 96px = 2.54cm)
pxpixels (1px = 1/96th of 1in)
ptpoints (1pt = 1/72 of 1in)
pcpicas (1pc = 12 pt)
sseconds (used for animations and transitions)
msmilliseconds (used for animations and transitions)
exRelative to the x-height of the current font
chBased on the width of the zero (0) character
frfractional unit (used for CSS Grid Layout)

Remarks

  • A whitespace cannot appear between the number and the unit. However, if the value is 0, the unit can be omitted.

  • For some CSS properties, negative lengths are allowed.

Related Examples