Why does the margin 20 of two consecutive divs not appear 40? _html/css_WEB-ITnose

Why are the margins of two consecutive divs set to margin:20px auto;
My understanding should be that there is a 40px gap between the two divs. But it displays only 20px

Why is it so strange?

<style type="text/css">	.div1{margin:20px auto;width:500px;height:100px;background-color:#FF99FF;overflow:hidden;}	.div2{margin:20px auto;width:500px;height:100px;background-color:#339933;overflow:hidden;}	.div3{margin:20px auto;width:500px;height:100px;background-color:#9933FF;overflow:hidden;}</style><div class="div1"></div><div class="div2"></div><div class="div3"></div>

Reply to discussion (solution)

Understand the box model, it is the distance between two borders

This is the margin merging phenomenon in the specification

The margin setting is relative to the div set by itself, and does not involve other divs, so it is not 40px.

External padding is only for your own DIV, it has nothing to do with anyone else!

Vertical margins are merged

Learning Posts