掌握边距重叠
Top and bottom margins of blocks are sometimes collapsed into a single margin whose size is the largest of the margins combined into it, a behavior known as margin collapsing.
Margin collapsing occurs in three basic cases:
- Adjacent siblings
- Parent and first/last child If there is no border, padding, inline content, or clearance to separate the margin-top of a block from the margin-top of its first child block, or no border, padding, inline content, height, min-height or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
- Empty blocks If there is no border, padding, inline content, height, or min-height to separate a block's margin-top from its margin-bottom, then its top and bottom margins collapse.
Margins of floating and absolutely positioned elements never collapse.