css样式中空白边的合并

2017-11-09 19:20:51来源:CSDN作者:sunshine_rose人点击

分享

css样式中空白边的合并

框模型

———————— 这里写图片描述 ————————

  • 框模型由元素的内容、填充、边框、空白边组成
  • 填充出现在内容区域的周围

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

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

空白边的合并

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

  • 情况二:元素的顶空白边与父元素的顶空白边发生叠加
    ———————— 这里写图片描述 ————————

  • 情况三:元素的顶空白边与底空白边发生叠加
    ———————— 这里写图片描述 ————————

  • 情况四:空元素中已经叠加的空白边与另一个空元素的空白边发生叠加
    ———————— 这里写图片描述 ————————

注:(细节知识点)

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

微信扫一扫

第七城市微信公众平台