Question about margin-bottom on blue box

Tell us what’s happening:
This is the blue box without margin-bottom:

Screenshot 2021-01-07 214851

And this is with margin-bottom 20px:

Screenshot 2021-01-07 214851

If you notice, the bottom of the yellow box in the second photo came closer to the border of the blue box.

Why? Shouldn’t with margin-bottom: 20px the bottom of the yellow box grow instead of shrink?

Your code so far


<style>
.injected-text {
  margin-bottom: -25px;
  text-align: center;
}

.box {
  border-style: solid;
  border-color: black;
  border-width: 5px;
  text-align: center;
}

.yellow-box {
  background-color: yellow;
  padding: 10px;
}

.red-box {
  background-color: crimson;
  color: #fff;
  margin-top: 40px;
  margin-right: 20px;
  margin-bottom: 20px;
  margin-left: 40px;
}

.blue-box {
  background-color: blue;
  color: #fff;
  margin-top: 40px;
  margin-left: 40px;
  
}
</style>
<h5 class="injected-text">margin</h5>

<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box blue-box">padding</h5>
</div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36.

Challenge: Add Different Margins to Each Side of an Element

Link to the challenge:

yes, I believe putting a margin-bottom on the blue box should make the yellow box grow to accommodate it.

https://codepen.io/RutherfordTheBrave/pen/qBaKzWj

The default bottom margin on the h5 is 1.67em which computes to 22.1776px. So 20px is less than the default which is why the parent gets shorter and not taller.

2 Likes