CSS垂直外边距合并

1.在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例。

  • 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。其中两个相邻的外边距都是正数时,合并结果是它们两者之间较大的值;两个相邻的外边距都是负数时,合并结果是两者绝对值的较大值;
    两个外边距一正一负时,合并结果是两者的相加的和。

外边距合并的场景:

  • 当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。

防止此种情况下的外边距合并可以设置元素的display:inline-block;
如果只有两个相邻元素可以设置后面的元素float:left;
设置父元素的display:flex可以让相邻元素脱离垂直排列关系,故也可以防止上下外边距合并,但子元素的宽高变得不受限。


0_1481373444240_屏幕快照 2016-12-10 下午8.23.42.png
  • 当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并,即为父子外边距合并的情况,如下图:


    0_1481363708193_屏幕快照 2016-12-10 下午5.54.47.png

阻止父子元素的边距合并可以设置父元素的border和padding参数,也可以设置父元素float:left,display:inline-block,positon:absolute,overflow(除了visible均可)来实现,还有一种是给父元素添加内容。(例如下图所示)

0_1481373895143_屏幕快照 2016-12-10 下午8.43.39.png

  • 假设有一个空元素,它有外边距,但是没有边框或填充。在这种情况下,上外边距与下外边距就碰到了一起,它们会发生合并;如果这个外边距遇到另一个元素的外边距,它还会发生合并。
    防止空元素造成的外边距合并可以先给空元素设置相关参数,让其变成有参数的元素,然后再参照其他两种边距合并情况下的处理方式去修复。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • 1. 在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例 外边距合并:外...
    进击的阿群阅读 939评论 1 2
  • 1.在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例 概念:在CSS当...
    饥人谷_任磊阅读 697评论 0 3
  • 一,浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动模型是一种可视化格式模型,浮动...
    DeeJay_Y阅读 901评论 0 4
  • 浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 特征: 脱离正常文档流,沿其容器的左侧...
    _Dot912阅读 738评论 0 3