Search⌘ K
AI Features
Home
Courses
The Complete Advanced Guide to CSS

The problem with the EM unit.

Learn how the EM unit in CSS computes font sizes relative to parent elements, leading to compound scaling in nested elements. Understand why this behavior can be confusing and discover the need for alternative units to achieve predictable sizing.

We'll cover the following...

Let’s go straight to an example:


Example

Consider the markup below:

HTML
<!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 styled ...