Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Units: em (The size of Letter M)

Relative to the font-size of the element.

<html>
<head>
  <meta name="viewport"
     content="width=device-width, initial-scale=1, user-scalable=yes">
  <title>Text units - px</title>
  <link href="page_em.css" rel='stylesheet' />
</head>
<body>
<h1>My Title</h1>
<p>This is the paragraph of our page.</p>
<div class="separator">
</div>

</body>
</html>


html {
   font-size: 10px;
}

.separator {
    width: 100%;
    height: 10em;
    background-color: blue;
}

h1 {
   font-size: 3em;
}

p {
   font-size: 2em;
   /*border: 1em solid red;*/
}

@media screen and (min-width: 800px) {
    html {
        font-size: 15px;
    }
    h1 {
        text-align: center;
    }
    p {
        text-align: center;
   }
}

The problem will be if we add another css directive insied the ‘p’ directive. eg. ‘border 1em solid red’. In this case the 1em will be relative to the font size of the ‘p’ element and not the font-size of the ‘html’ element. So within the same ‘p’ element ‘2emp’ of the ‘font-size’ and ‘1em’ of the ‘border’ will be equal.