em is relative to the font size : measurement : Style Basics HTML CSS TUTORIALS

HTML CSS TUTORIALS » Style Basics » measurement »

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>