css样式中空白边的合并

css样式中空白边的合并

框模型

———————— ————————

• 框模型由元素的内容、填充、边框、空白边组成

• 填充出现在内容区域的周围

• 若添加背景，则背景会应用于由内容和填充组成的区域

• 空白边是透明的，一般使用它控制元素之间的间隔

空白边的合并

• 情况一：元素的顶空白边与前面元素的底空白边发生叠加
  ———————— ——————

• 情况二：元素的顶空白边与父元素的顶空白边发生叠加
  ———————— ————————

• 情况三：元素的顶空白边与底空白边发生叠加
  ———————— ————————

• 情况四：空元素中已经叠加的空白边与另一个空元素的空白边发生叠加
  ———————— ————————

注：（细节知识点）

• 只有普通文档流中块框的垂直空白边才会发生空白边叠加。
• 行内框、浮动框或绝对定位框之间的空白边不会叠加。