margin-top 外边距合并

shmily 发布于2019-08-23 17:53 / 1879人阅读

摘要：中，水平边距永远不会重合。垂直边距可能在特定的框之间重合常规流向中两个或多个块框相邻的垂直边距会重合。结果的边距宽度是相邻边距宽度中较大的值。如果出现负边距，则在最大的正边距中减去绝对值最大的负边距。绝对和相对定位的框的边距不重合。

这是一个早以前研究过的东西，今天java开发说起了这个，顺带记录一下。
这里有一行代码，很简单的一段代码

可是在浏览器中打开后，居然是这个样子的~

( 黑色的区块为div1,红色的为div2 )

从效果上看div2的margin-top像是没有生效，经测量div1的margin-top值，发现这个div2的margin-top像是生效到div1上了。

就这几行代码写错是不大可能，那这又是怎么回事？

之前遇到这个问题时，试遍了所有的浏览器，都是这个样子；我就觉着这是个兼容性极佳的BUG。

后来一个偶然的机会发现在父级上增加border或者overflow:hidden是可以规避这个问题，且这个问题只会在常规流向中出现，也就是说用position或者是float都不会存在这个问题。

整点原理规范什么的提高一下；百度一下，你就知道。。

边距重合来源:W3C CSS2.1

在本规范中，表述边距重合意味着两个或多个框（可能相邻也可能嵌套）的相邻的边距（其间没有边白或边框间隔）重合在一起而形成一个单一的边距。
CSS2中，水平边距永远不会重合。

垂直边距可能在特定的框之间重合：

常规流向中两个或多个块框相邻的垂直边距会重合。结果的边距宽度是相邻边距宽度中较大的值。如果出现负边距，则在最大的正边距中减去绝对值最大的负边距。如果没有正边距，则从零中减去绝对值最大的负边距。

在一个浮动框和其它框之间的垂直边距不重合。

绝对和相对定位的框的边距不重合。

首先了解到这并不是BUG，而是个规范，虽然看上去像是BUG
按着规范试一下,觉着还是像是个BUG。

看规范是一目十行，过目就忘,还是整理一下。

外边距合并的触发条件：

常规流向布局，未使用定位或者是浮动

存在垂直边距

父级元素不存在border,overflow:hidden

在父级元素与子元素之间不存在拥有实际高度的元素(包含文本)

外边距合并的解决方式：

父级元素增加border,overflow

使用定位或者是浮动

使用padding-top替代margin-top,比较推荐这个。

随笔一行
这是前端最好的时代，这也是前端最坏的时代。众多前端框架满天飞，随着 jQuery 在前端行业的慢慢弱化，总是会有一种斯人远去，何者慰籍的感觉。互勉吧，各位。

另推荐个表格组件gridManager

云服务器 GPU云服务器外边距重叠 html外边距上下 html外边距颜色 html 边框外边距

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104298.html

CSS之表格边框合并、兄弟标签外边距合并、父子标签的外边距合并

摘要：本文内容表格边框合并兄弟标签外边距合并父子标签的外边距合并首发日期表格边框合并发生情况当设置了后，表格的相邻边框会合并，使得边框变粗了。本文内容：表格边框合并兄弟标签外边距合并父子标签的外边距合并首发日期：2018-05-01 表格边框合并：发生情况：当设置了cellpadding=0 cellspacing=0后，表格的相邻边框会合并，使得边框变粗了。 D...

_Dreams 2019-04-23 13:46 评论0 收藏0
CSS--外边距合并的问题

摘要：外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。首先看下W3C对于外边距合并的介绍：外边距合并...

longshengwang 2019-08-29 12:39 评论0 收藏0
CSS margin合并问题

摘要：两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。两个外边距一正一负时，折叠结果是两者的相加的和。在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。 1. 折叠的结果两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。两个相邻的外边距都是负数时...

zhongmeizhi 2019-08-30 14:07 评论0 收藏0
CSS进阶指南

摘要：二正文脱离文档流脱离文档流的元素都是块级元素。参考资料什么是文档流指语言文本从左到右，从上到下显示，这是传统文档的文本布局。定位不脱离文档流，设置没有作用，对敏感。允许指定负的外边距值。一前言要想掌握CSS部分的内容其实并不容易，尽管你已经阅读过相当多的关于CSS的书籍，但是还是免不了去网上搜索相关的知识扩大你对CSS内容的掌握。在网络上查找最好的地方当然是CSS官网文档，不过英...

SolomonXie 2019-08-29 14:18 评论0 收藏0
CSS盒子模型以及外边框合并的问题

摘要：盒子模型我们把布局里面的所有东西都可以想象成一个盒子，盒子里面又装着小盒子，小盒子里面又装着小小盒子所以布局的万物基于盒子。虽然外边距是不可见的，但是我们算元素的总宽度或者总高度的时候，要加上外边距。盒子模型我们把布局里面的所有东西都可以想象成一个盒子，盒子里面又装着小盒子，小盒子里面又装着小小盒子......所以布局的万物基于盒子。即使一个小小的元素p，也可以把它抽象成为一个盒子...

zacklee 2019-08-02 16:01 评论0 收藏0
CSS盒子模型以及外边框合并的问题

摘要：盒子模型我们把布局里面的所有东西都可以想象成一个盒子，盒子里面又装着小盒子，小盒子里面又装着小小盒子所以布局的万物基于盒子。虽然外边距是不可见的，但是我们算元素的总宽度或者总高度的时候，要加上外边距。盒子模型我们把布局里面的所有东西都可以想象成一个盒子，盒子里面又装着小盒子，小盒子里面又装着小小盒子......所以布局的万物基于盒子。即使一个小小的元素p，也可以把它抽象成为一个盒子...

paulli3 2019-08-29 14:03 评论0 收藏0