Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

Length Values

Authors may specify length values in CSS using several different units of measure. Even though "px" and "em" are the recommended units to use in CSS, authors can replace them with other units of measure without restriction.

Absolute Lengths

mm ( millimeter ) - smallest standard unit of length in the metric system cm ( centimeter ) - 1cm = 10mm in ( inch ) - 1in = 2.54cm px ( pixel ) - 1px = 1/96in ( recommended absolute length ) pt ( point ) - 1pt = 1/72in pc ( pica ) - 1pc = 12pt <style> #header { height: 2cm; } #container { height: 600px; } </style>

Font Relative Lengths

em - ( font size ) - unit relative to font-size ex ( x-height ) - unit relative to the height of the lowercase "x" of the font applied ch ( zero-measure ) - unit relative to the size of the "0"(zero) of the font applied CSS3 rem ( root em ) - unit equal to the font-size of the root element <style> p { font-size: 1.2em; line-height: 2em; } </style>

Percentage Lengths

Unlike the absolute units listed above, percentage lengths will dynamically take up a percentage of the available space inside the parent element. The parent element size affects percentage lengths. <style> #box1 { width: 50%; height: 50%; } </style>

Viewport Percentage Lengths

Viewport percentage lengths will take up a percentage of the available viewport space. Parent element size has no affect on these lengths, they are bound to the viewport. CSS3 vw ( viewport width ) - unit equal to 1% of the window width CSS3 vh - ( viewport height ) - unit equal to 1% of the window height CSS3 vmin ( viewport minimum ) - unit equal to 1% of whichever is smaller of "vw" and "vh" CSS3 vmax ( viewport maximum ) - unit equal to 1% of whichever is larger of "vw" and "vh" <style> #box1 { width: 50vw; height: 50vh; } </style> see viewport lengths video tutorial

CSS

Value Reference

Color ValuesLength Values