CSS Box Model

We can think of every HTML tag as a "box".

What are the characteristics of this "box": the height or height of the content, the border line, the padding, and the margin.

Total width of "box": Width of content + Border Width * + Left padding * + left Margin * *

Upper and lower margin merging problem--this is a phenomenon

Under what circumstances? The upper and lower margins will be merged?

The top and bottom two block elements, if each element has specified four margins, then the upper and lower adjacent to the margin will occur merging phenomenon,

Take the larger margin after merging

how to implement top and bottom two <div> the distance between the 100px , how to achieve it?

1, up and down two <div> one only specify margin-bottom:100px, and another <div> of the margin-top:0px, this can be achieved.

2, can be in the upper and lower two <div> middle, add an empty <div>, and give null <div> specify a height of 100px, can also be implemented

CSS Box Model