margin 外边距

phodal 发布于2019-08-29 15:10 / 326人阅读

摘要：的意思很容易明白，就是外边距，用更通俗的话说，就是二个盒子之间间距的设置。有许多需要注意的地方，比如块级元素垂直相邻外边距会合并，行内元素实际上不占上下外边距，左右外边距也不会合并，浮动元素的外边距也不会合并。

作者：心叶
时间：2018-04-26 20:39

第一步：基础说明。

margin的意思很容易明白，就是外边距，用更通俗的话说，就是二个盒子之间间距的设置。

margin有许多需要注意的地方，比如块级元素垂直相邻外边距会合并，行内元素实际上不占上下外边距，左右外边距也不会合并，浮动元素的外边距也不会合并。

普通元素的margin百分百是按照父级元素（正确的说应该是包含块，具体可以看这篇文章关于CSS中设置overflow属性的值为hidden的相关理解）的宽来计算的，而绝对定位的元素的margin百分比是按照第一个定位元素（relative，absolute和fixed）的宽来计算的。

第二步：block元素重叠。

block元素（不考虑float和absolute）在垂直方向发生margin重叠（不考虑writing-mode改变书写方式）；margin三种重叠：1.相邻兄弟元素；2.父亲元素和第一个或最后一个孩子元素；3.空的block元素。

第三步：重叠条件。

父子元素重叠条件（margin-top）

1.父元素非块状格式上下文元素；
2.父元素和第一个子元素之间没有inline元素分割；
3.父元素没有border-top或padding-top设置。

父子元素重叠条件（margin-bottom）

1.父元素非块状格式上下文元素；
2.父元素没有border-bottom或padding-bottom设置；
3.父元素和最后一个子元素之间没有inline元素分割；
4.父元素没有height,min-height和max-height的限制。

空的block元素重叠

1.元素没有border或padding或inline设置；
2.没有height或者min-height设置。

第四步：有价值的细节。

重叠计算方法：正正取最大、负负取最小和正负相加。

在书写方向的垂直方向，margin:auto会自动分配剩余空间（剩余空间的意思简单的可以理解为：在没有设置宽之前的长度去掉你设置的宽余下的那段距离）。

绝对定位元素的非定位方向margin无效（貌似是的，不过描述不准确，其实一直有效，只不过现在只可以影响自己，无法改变兄弟了，因此看起来失效了）。

最后一个题外话，margin-collapse可以设置重叠方式（collapse默认，重叠、discard取消margin,等于margin:0和separate分隔，就是不发生重叠）。

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

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

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

CSS--外边距合并的问题

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

longshengwang 2019-08-29 12:39 评论0 收藏0
CSS 盒模型

摘要：概览盒模型也叫框模型，规定了元素框处理元素内容内边距边框和外边距的方式。不幸的是，和在使用自己的非标准模型。当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。如果缺少右外边距的值，则使用上外边距的值。概览 CSS 盒模型 (Box Model)也叫框模型，规定了元素框处理元素内容、内边距、边框和外边距的方式。 showImg(http...

heartFollower 2019-08-28 18:17 评论0 收藏0
「CSS」Margin Collapsing - 外边距合并

摘要：外边距合并都是基于以下三种基本的外边距合并。空元素它自己的上外边距和下外边距合并了。阻止外边距合并第二种情况不合并设置不为都可。外边距合并在排版上带来非常大的便利，但是人们对其不甚了解，导致使用外边距的时候总是出现繁多问题，今日写下一片文章，总结一下外边距合并。三种基本的外边距合并只有上外边距和下外边距才会触发外边距合并，左外边距和右外边距不会。外边距合并都是基于以下三种基本的外...

cheukyin 2019-08-28 18:17 评论0 收藏0
深入理解CSS外边距折叠（Margin Collapse）

摘要：我们可以注意定义中的几个关键字毗邻两个或多个垂直方向和普通流。如何避免外边距叠加上面讲了外边距的叠加，那如何避免呢，其实只要破坏上面讲到的四个条件中的任何一个即可毗邻两个或多个普通流和垂直方向。外边距叠加一直是前端开发必须了解的一个概念，面试一般也会问到这个问题。所以整理一下相关外边距叠加相关的知识点。外边距叠加是什么？什么时候会发生外边距叠加？如何避免外边距叠加？什么是外边距叠加...

zhonghanwen 2019-08-29 13:01 评论0 收藏0
CSS规范 > 8 盒模型 Box Model

摘要：当两个及以上外边距折叠，合并后的外边距宽度是发生折叠的外边距中的最大宽度。如果该元素的外边距同其父元素的上外边距折叠，则该盒的上边框边缘同其父元盒的上边框边缘相同。 2017-07-20: 关于外边距折叠, 推荐问题: https://segmentfault.com/q/10... 8 盒模型 Box Model URL: http://www.w3.org/TR/CSS2/box...

suemi 2019-08-28 18:14 评论0 收藏0
详解css外边距折叠（margin collapsing）

摘要：这个例子就是外边距折叠块级元素的上外边距和下外边距有时会合并或折叠为一个外边距。外边距折叠指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距，本文详细的介绍了一下css外边距折叠的实现，分为3种情况，非常具有实用价值，需要的朋友可以参考下前文这是的一个经典的老问题，因为之前刚好有读者朋友问到，顺便整理一下。从一个简单例子说起先看一个简单示例： `` `.sli...

孙吉亮 2019-08-23 13:52 评论0 收藏0