user14037909
user14037909

Reputation: 13

Why is h1's "padding: 2em" is equal to 64px? I think it should be 16px*2

Why is my h1's padding: 2em equal to 64px? I think it should be 16px * 2.

<!DOCTYPE html>
<html lang="en">
<head>
<style>
h1 {
  margin: 0;
  background-color: blue;
  padding: 2em;
}
</style>

</head>
<body>
  <h1>Title</h1>
</body>
</html>

The result:

result

Upvotes: 0

Views: 145

Answers (1)

Johannes
Johannes

Reputation: 67748

The em unit refers to the font-size of the current element, so if for your h1 font-size is set to 32px (in your case obviously by the browser default settings), 2em will be 32x2 = 64px.

(You are obviously mixing it up with the rem unit, which refers to the "root" font-size.)

Upvotes: 1

Related Questions