CSS Lengths
[this page | pdf | back links]
Often it is important to
specify the size of an HTML element.
The conventions used when doing this in CSS are set
out below.
A CSS length is a number
followed by a length unit, such as 20px or 3cm. To be correctly understood, the
specification needs to avoid any whitespace between the number and the length
unit (e.g. using 20 px will
generally not be recognised as a length by browsers). If the value is zero (0) then the unit can be omitted.
Length units can be
absolute or absolute.
Absolute lengths
These are fixed in size,
and material will should appear exactly that size (unless the user then zooms
in or out manually). As screen sizes vary considerably, best practice typically
recommends using relative lengths not absolute lengths.
|
Unit
|
Description
|
|
cm
|
centimetres
|
|
mm
|
millimetres
|
|
in
|
inches (1in = 2.54cm)
|
|
px
|
pixels (1px = 1/96th
of 1in, for high resolution screens, but for low resolution screens then 1px
is one device pixel, i.e. dot, of the display
|
|
pt
|
points (1pt = 1/72 of
1in)
|
|
pc
|
picas (1pc = 12pt)
|
Relative lengths
Relative lengths are
specified relative to another length property. These types of lengths tend to
scale better across different screens or other rendering mediums.
|
Unit
|
Description
|
|
ch
|
Relative to width of a
“0” (zero) character
|
|
em
|
Relative to font-size
of element (e.g. 2em means twice the relevant font size)
|
|
ex
|
Relative to x-height of
current font (this unit is rarely used)
|
|
rem
|
Relative to font-size
of root element
|
|
vw
|
Relative to 1% of the
width of the viewport (i.e. the browser window size)
|
|
vh
|
Relative to 1% of the
height of the viewport (i.e. the browser window size)
|
|
vmin
|
Relative to 1% of the
viewport’s smaller dimension (not recognised by all browsers)
|
|
vmax
|
Relative to 1% of the
viewport’s larger dimension (not recognised by all browsers)
|
EXAMPLE:
HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>div {border: 1px solid black; display: inline-block;}</style>
</head>
<body>
Different CSS lengths:<br>
<table>
<tr><td>1cm</td><td><div style="width: 1cm;"> </div></td>
<tr><td>10mm</td><td><div style="width: 10mm;"> </div></td>
<tr><td>1in</td><td><div style="width: 1in;"> </div></td>
<tr><td>100px</td><td><div style="width: 100px;"> </div></td>
<tr><td>100pt</td><td><div style="width: 100pt;"> </div></td>
<tr><td>10pc</td><td><div style="width: 10pc;"> </div></td>
<tr><td>10ch</td><td><div style="width: 10ch;"> </div></td>
<tr><td>10em</td><td><div style="width: 10em;"> </div></td>
<tr><td>10ex</td><td><div style="width: 10ex;"> </div></td>
<tr><td>10rem</td><td><div style="width: 10rem;"> </div></td>
<tr><td>5vw</td><td><div style="width: 5vw;"> </div></td>
<tr><td>5vh</td><td><div style="width: 5vh;"> </div></td>
<tr><td>5vmin</td><td><div style="width: 5vmin;"> </div></td>
<tr><td>5vmax</td><td><div style="width: 5vmax;"> </div></td>
</table>
</body>
</html>
|
NAVIGATION LINKS
Contents | Prev | Next | CSS Properties