The Complete Advanced Guide to CSS/

...

/

The problem with the EM unit.

The problem with the EM unit.

The EM unit can cause unintended results when not understood. Let me save you the stress.

We'll cover the following...

Let’s go straight to an example:


Example

Consider the markup below:

Press + to interact
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>A Simple Page</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
  <div class="one">
            One Hello World!
            <div class="two">
                Two Hello World
                <div class="three">
                Three Hello World
                </div>
            </div>
  </div>
</body>
</html>

Please look very closely. Class, .one is a parent to .two and .two is a parent to three. Some deep nested stuff going on there.

So, if you ...