em is relative to the font size
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> em measurement </title>
<style type='text/css' media='all'>
body {
border: 1em solid black;
margin: 0;
padding: 10px;
}
div {
font-size: 24px;
height: 3em;
border: 1em solid black;
}
</style>
</head>
<body>
The body's border is 1em thick.
<div>
This font is 24 pixels tall and this div is 3 ems tall,
which results in a div 72 pixels tall (3 * 24 = 72). Its
border is 1em thick, or 24 pixels thick.
</div>
</body>
</html>
Related examples in the same category