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.
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?