0

I have given the same font size(2em) to all divs. But the font size in #left and #right is obviously bigger. I have no idea why the browser gives this result.

Here's a code snippet:

div {
  color: white;
  font-size: 2em;
}

#header {
  width: 100%;
  height: 120px;
  background: #99ff00;
}

#main {
  width: 100%;
  height: 400px;
  background: #99ff99;
}

#left {
  width: 30%;
  height: 100%;
  float: left;
  background: #999999;
}

#right {
  width: 70%;
  height: 100%;
  float: left;
  background: #553344;
}

#footer {
  clear: both;
  width: 100%;
  height: 80px;
  background: #66ff66;
}
<div id="header">header</div>
<div id="main">
  <div id="left">left</div>
  <div id="right">right</div>
</div>
<div id="footer">footer</div>
Edric
  • 24,639
  • 13
  • 81
  • 91
Parmenides
  • 85
  • 6
  • 1
    `em` is a relative unit. `2em` means twice the `font-size` of the parent. So nesting elements with `font-size: 2em` means you double the size with each level further down. [CSS values and units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units) – hsan May 08 '19 at 08:13
  • Would recommend to use `rem` instead – SuperDJ May 08 '19 at 08:45

1 Answers1

0

The div default font-size is 16px.

The parent container <div id="main"> has the property font-size:2em;. It means that the font-size is 32px (parent-container-font-size*2).

Same thing for the #right and #left blocks, they have property font-size:2em;. It means that the font-size is 64px (parent-container-font-size*2).

Ludo
  • 123
  • 1
  • 9