Scribd
Upload
20 views

CSS Units

The document discusses different CSS units for expressing length values like width, margin, padding, and font-size. There are absolute units like px, cm, mm, and relative units like em and rem relative to font sizes, and vw, vh relative to viewport dimensions.

Uploaded by

Mansidão Filemom Pedro
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
20 views

CSS Units

The document discusses different CSS units for expressing length values like width, margin, padding, and font-size. There are absolute units like px, cm, mm, and relative units like em and rem relative to font sizes, and vw, vh relative to viewport dimensions.

Uploaded by

Mansidão Filemom Pedro
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

CSS Units

CSS has several different units for expressing a length.

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;
}

Try it Yourself »

Note: 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.

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 centimetersTry it

mm millimetersTry it

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

px * 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
Relative to the font-size of the element (2em means 2 times the size of the
em current font) Try
<!DOCTYPE html> it

<html>
<head>
<style>
p{
font-size: 16px;
line-height: 2em;
}

div {
font-size: 30px;
border: 1px solid black;
}
span {
font-size: 0.5em;
}
</style>
</head>
<body>
<p>These paragraphs have a calculated line-height of: 2x16px = 32px.</p>
<p>These paragraphs have a calculated line-height of: 2x16px = 32px.</p>
<p>These paragraphs have a calculated line-height of: 2x16px = 32px.</p>
<div>The font-size of the div element is set to 30px. <span>The span element
inside the div element has a font-size of 0.5em, which equals to 0.5x30 =
15px</span>.</div>

</body>
</html>

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


<!DOCTYPE html>
<html> it
<head>
<style>
div {
font-size: 30px;
border: 1px solid black;
}

span {
font-size: 1ex;
}
</style>
</head>
<body>

<div>The font-size of the div element is set to 30px. <span>The span element
inside the div element has a font-size of 1ex</span>.</div>

</body>
</html>

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 Relative to 1% of viewport's* smaller dimension Try


it

vmax 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!
* Viewport = the browser window size. If the viewport is 50cm wide, 1vw =
0.5cm.

You might also like