http://jsfiddle.net/gothic/B6E8F
It does not mean that the vertical margins of two or more adjacent block elements in ordinary flows will collapse. So which condition does this example violate?
w3.org Specification on margin merging
Two margins are adjoining if and only if: both belong to in-flow block-level boxes that participate in the same block formatting context no line boxes, no clearance, no padding and no border separate them ...
Two margins are adjoining if and only if:
both belong to in-flow block-level boxes that participate in the same block formatting context
no line boxes, no clearance, no padding and no border separate them
...
Margin needs to belong to the block-level box in the same BFC, overflow: hidden A new BFC is created, so it will not collapse naturally.
overflow: hidden
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
w3.org Specification on margin merging
Margin needs to belong to the block-level box in the same BFC,
overflow: hiddenA new BFC is created, so it will not collapse naturally.