Units: em (The size of Letter M)

Relative to the font-size of the element.

examples/html/page_em.html

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

examples/html/page_em.css

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.