Negative Margins

According to this article, when we apply margin-bottom to an element it should pull any succeeding element(s) with it, while not moving that element at all. However, in this challenge, there are no elements below/after h2 element with the class blue-box and yet the yellow portion of its container disappears. Why is that?

Hello, skanda.

One thing to note: the .yellow-box is not succeeding .blue-box. So, the “yellow portion” is enveloped by its child .blue-box.

If you add this to the file:

.green-box {
    background-color: green;
    color: white;
    padding: 20px;
    margin: 15px;
  }
</style>

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

You will see that the .green-box is pulled with the .blue-box, because it succeeds the .blue-box.

Hope this helps

My question is why is the parent element - the div with the class yellow-box, being affected by the margin set on one of its child?

Well, with a negative margin, you are, essentially, making the element smaller. So, if .blue-box is made smaller then its parent .yellow-box will not need to be as big.

It is not actually smaller, but these are apparent effects.

1 Like

That made it clear. Thank you.

Say we don’t have the green box and we add margin-bottom of -15px to our .blue box. Now there are no succeeding elements to our blue-box. So, why is our yellow box being affected?