什么是外边距重叠,重叠的结果是什么?

1.什么是外边距重叠?

    外边距重叠指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的高度如果都是正边界,边界宽度是相邻边界宽度中最大的值。如果出现负边界,则在最大的正边界中减去绝对值最大的负边界。如果没有正边界,则从零中减去绝对值最大的负边界。只有外边距才可以是负值,内边距不允许为负值。

2.外边距重叠的图示:

    当一个元素出现在另一个元素上面时,第一个元素的底边界与第二个元素的顶边界发生合并。

   当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的顶和底边界也发生合并:

    假设有一个空元素,它有边界,但是没有边框或填充。在这种情况下,顶边界与底边界就碰到了一起,它们会发生叠加:

3.外边距重叠的作用。

    当我们上下排列一系列规则的块级元素时,那么块元素之间因为外边距重叠的存在,段落之间就不会产生双倍的距离,这样各处距离就一致了。

4.外边距不重叠的情况。

    水平margin永远不会重合

    设置了overflow属性(visible除外)的元素和它的子元素之间的margin不会重叠

    设置了绝对定位(position:absolute)的盒模型,垂直margin不会被重叠,和子元素之间也不重叠

    设置了display:inline-block的元素,垂直margin不会重叠,和子元素之间也不重叠

    根元素(如html)与body的margin不会重叠

5.防止外边距重叠的方法。

    元素绝对定位postion:absolute;一般用在内层元素

    内层元素 加float:left;或display:inline-block;

    外层元素用padding增加边距

    外层元素设置overflow:hidden;

    内层元素透明边框border:1px solid transparent;

6.参考文献

CSS外边距(margin)重叠及防止方法

CSS中margin边界叠加问题及解决方案

CSS2速查表- BFC与边距重叠详解

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,787评论 1 92
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 1,866评论 0 6
  • 1.什么是外边距重叠 外边距重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界重合在一起而形成一个单一边界,外...
    枫尘逍遥阅读 1,649评论 0 0
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,228评论 0 8
  • 内心里有个妒忌的小孩 无形中已经影响到生活 轻声对它说:“关注自己,放过自己!”
    福丫阅读 295评论 1 2