What's the impact of the negative bottom margin

Question

First, here is the html:

<div class="first">
    <div class="second">
        <div class="third">
           Hello, margin collapsing!
        </div>
    </div>
</div>

Then here is the CSS:

.first {
  background-color: red;
  padding: 20px;
}

.second {
  background-color: green;
  margin-bottom: -20px;
}

.third {
  background-color: yellow;
  margin-bottom: 20px;
}

In the final layout, the third div looks like it doesn't have the bottom margin. I know it must be the effect of the second div whose bottom margin is negative. But I don't understand how it works. Could you please provide an explanation?

Answer 1

Padding - Creates, easy said, a invisible border inside your element. You provide with it the spaces inside of your element (arround the content).

.first {
  background-color: red;
  padding: 20px;
}

So here you tell, any content of first hast to be 20px away from each side (each side cause you did not provide any declaration like padding-top)

Margin - On the other hand creates the opposite, it creates space arround your element.

.second {
  background-color: green;
  margin-bottom: -20px;
}

So this one says the second block has a space on the bottom outside. Its defined negative, which means the following items float in your element.

This explains it awfully: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model