margin collapsing

margin collapsing

Top and bottom margins of blocks are sometimes combined (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

The margins of adjacent siblings are collapsed (except when the later sibling needs to be cleared past floats)- For example:

 <p>The bottom margin of this paragraph is collapsed...</p>
 <p>...with the top margin of this paragraph.</p>

Parent and first/last child

If there is no border, padding, inline content, 登录查看完整内容