你有所不知的margin属性

joywek 发布于2019-08-30 14:01 / 1748人阅读

摘要：前言致谢本文总结于张鑫旭老师的深入理解之课程，感谢张老师的辛苦付出难学的作为前端狗的我们，每天都要和网页打交道。页面中任何地方，嵌套或直接放入任何空的，都不会影响原来的布局。比如，给元素声明，但在中的属性是。

前言致谢

　本文总结于张鑫旭老师的 CSS深入理解之margin课程，感谢张老师的辛苦付出！

难学的 CSS

　作为前端狗的我们，每天都要和网页打交道。当 UI 将设计稿发给你时，CSS 的知识便显得尤为重要。而 CSS 这一标记性的语言，却时常让我很头疼：毫无逻辑性，并充满了各种坑爹的潜规则，以至于每次做项目时，大部分时间精力都浪费在了调整布局与样式上，详情可点击知乎上的为什么 CSS 这么难学？问题，道出了我的心声 :(

　但谁叫我们是吃这碗饭的呢，不管怎样，有困难必须迎面解决，学好 CSS ，向张老师看齐！

正文

margin 算是性格刚烈的属性了，下面，我将从各个方面讲解 margin 的可怕之处。

元素尺寸的影响

通常一个元素的尺寸可分为：可视尺寸 与 占据尺寸

可视尺寸 - clientWidth (border - padding - size)

占据尺寸 - outerWidth (border - margin)

margin 又是怎样影响这两个尺寸的呢？

首先，两个尺寸都需满足一定的条件。

可视尺寸的影响条件

适用于没有设定 width/height 的块级元素 (宽高设死了，怎么会影响呢？)
其中不包括 float absolute fixed 元素，inline水平，table-cell 元素

只适用于水平方向尺寸（margin-left/margin-right）

占据尺寸的影响条件

适用于 block/inline-block 水平元素

适用于任何方向

与 width/height 值无关

inline 元素只影响水平方向 (后面会提到)

影响示例

margin 影响元素的可视水平尺寸
margin的可视尺寸示例

margin 影响占据尺寸，这个可以说是 margin 的本命技能了，就不举例了。

百分比单位

通常而言，margin 的单位中，百分比单位最容易让人头晕。

普通元素的百分比 margin 都是相对于 容器的宽度 计算的

绝对定位的百分比 margin 是相对于第一个具有定位属性的祖先元素的宽度 计算的(relative/absolute/fixed)

重叠详解

重叠可谓是 margin 中的最重要的潜规则了。

发生情景

相邻的兄弟元素

父级和第一个/最后一个子元素

空的块级元素（自己和自己）

重叠条件

块级元素（不包括 float 和 absolute 元素）

不考虑 writing-mode，只发生在垂直方向（margin-top/margin-bottom）

父子重叠条件

margin-top 重叠

父元素非格式化上下文元素没有设置 overflow:hidden

父元素没有 border-top 设置

父元素没有 padding-top 设置

父元素和第一个子元素之间没有inline元素分割

margin-bottom 重叠

父元素非格式化上下文元素没有设置 overflow:hidden

父元素没有 border-bottom 设置

父元素没有 padding-bottom 设置

父元素和第一个子元素之间没有inline元素分割

父元素没有 height ，min-height，max-height 限制

空的块级元素 margin 重叠条件

1. 元素没有 border 设置
2. 元素没有 padding 设置
3. 里面没有 inline 元素
4. 没有 height，或者 min-height

计算规则

正正取大值




两个元素垂直距离为 : #top元素的 margin-top值

正负值相加




两个元素垂直距离为: #top元素的margin-top值 加上 #bottom元素的margin-bottom值

负负最负值




两个元素垂直距离为 : #top元素的 margin-top值

父级和第一个/最后一个子元素发生重叠
给子元素设置垂直方向的 margin ，等同于给父元素设置相同的垂直方向的 margin 属性，
也就是说父子元素发生 margin 重叠时，它们俩共用一个 margin 属性

重叠意义

连续段落或列表之类，如果没有margin重叠，排版会不自然。

页面中任何地方，嵌套或直接放入任何空的 div，都不会影响原来的布局。

遗落空的任意多个 p 元素，不会影响原来的阅读排版。

margin auto

当你使用 margin auto 时，就应该联想到一个词：填充

一个没有设置宽高的块级元素，会自动填充宽度

如果一侧是定值，一侧是 auto，则 auto 为剩余空间的大小

如果两侧均是 auto，则平分剩余空间

示例如下：

margin:auto 0 !== 垂直居中

以上，我们可得当一个块级元素设置了 margin: 0 auto 可以实现水平居中，

而为什么 margin:auto 0 不会垂直居中？

答：一个块级元素会自动填充可用的水平尺寸，但不会填充垂直尺寸，是因为其根本没有任何可用的垂直空间。也就是说 margin: 0 auto , 总是有尺寸可以来填充的！而 margin: auto 0 是没有任何尺寸的可以来填充的。

失效情况

当子元素的宽度大于父元素的宽度，是无法通过 margin: 0 auto 实现居中的
因为，这个时候已经没有任何空间可以填充了，当宽度超出父元素时，margin 已经为负值了。

垂直居中

writing-mode 与垂直居中

绝对定位元素

失效情景

inline 水平元素的垂直margin 无效（margin-top/margin-bottom）

margin 重叠发生

绝对定位元素非定位方位的 margin值 "无效"
因为绝对定位元素脱离了文档流，与相邻元素没有关系，所以它不可能像普通元素一样，设置margin，推走其他元素

margin 鞭长莫及
因为有某些元素破坏了文档流，设置了 float absolute，造成了假象，margin不会根据这些破坏元素作为标准

display:table-cell/display:table-row 等声明的margin无效！某些替换元素除外，根据各个浏览器的实现方式作为区分。比如，给 button 元素声明 display:table-cell，但在 chrome 中,button 的 display 属性是 inline-block 。

内联特性导致 margin 失效
margin-top: 负无穷，但是，小到 1em 便无效了。
因为它是内联元素，默认是基线对齐，x字母下边缘对齐，margin 值再大，也不会起作用。
margin负无穷情景解析

其他属性

margin-start

正常流向，margin-start 等同于 margin-left，两者重叠不相加

如果水平流向是从右向左，margin-start 等同于 margin-right

在垂直流下 ( writing-mode:vertical-*; ) margin-start 等同于 margin-top

margin-end 与 margin-start 相对

margin-before 默认情况等同于 margin-top

margin-after 默认情况等同于 margin-bottom

margin-collapse

margin-collapse:collapse;

(默认值) 发生重叠

margin-collapse:discard;

取消重叠，margin 重叠部分为 0 ，没有margin

margin-collapse:separate;

不发生重叠，margin 重叠部分为 margin-top + margin-bottom

结束语

margin 课程就到此结束了，再次感谢张鑫旭老师的辛苦付出！

深入Web全栈各项技术，坚持原创，文章更新虽不定，但只为质量而生，如果您喜欢此篇文章，欢迎支持关注。

专线服务超融合服务器不知你理解的html margin: margins

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

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

你不知的DOM编程

摘要：思路合并所有改变然后一次性处理使用属性修改类名批量修改当你需要对元素进行一系列操作的时候，不妨按照如下步骤使元素脱离文档流对其应用多重改变把元素带回文档中上面的这一套组合拳中，第一步和第三部分别会触发一次重排。前言：随着vue，react, angular的流行，可能现在我们不必经常的操作DOM，三大框架在副交互的操作中发挥着极大地优势。因为我们知道用脚本对DOM的操作非常昂贵，本文...

Anshiii 2019-08-21 17:27 评论0 收藏0
你不知的DOM编程

摘要：思路合并所有改变然后一次性处理使用属性修改类名批量修改当你需要对元素进行一系列操作的时候，不妨按照如下步骤使元素脱离文档流对其应用多重改变把元素带回文档中上面的这一套组合拳中，第一步和第三部分别会触发一次重排。前言：随着vue，react, angular的流行，可能现在我们不必经常的操作DOM，三大框架在副交互的操作中发挥着极大地优势。因为我们知道用脚本对DOM的操作非常昂贵，本文...

warnerwu 2019-08-01 17:56 评论0 收藏0
你不知的DOM编程

摘要：思路合并所有改变然后一次性处理使用属性修改类名批量修改当你需要对元素进行一系列操作的时候，不妨按照如下步骤使元素脱离文档流对其应用多重改变把元素带回文档中上面的这一套组合拳中，第一步和第三部分别会触发一次重排。前言：随着vue，react, angular的流行，可能现在我们不必经常的操作DOM，三大框架在副交互的操作中发挥着极大地优势。因为我们知道用脚本对DOM的操作非常昂贵，本文...

binaryTree 2019-08-05 17:58 评论0 收藏0
我不知道你知不知道我知道的伪元素小技巧

摘要：伪元素伪元素能做什么我们要他有何用它能为我们解决什么问题和其他的方法相比她有什么有点我们为什么要使用它伪元素和伪类一样，添加到选择器，但是不是描述状态，他允许我们为元素某些部分设置样式利用伪元素，我们可以简化页面的标签，同时用起来也很方便，伪元素伪元素能做什么？我们要他有何用？它能为我们解决什么问题？和其他的方法相比她有什么有点？我们为什么要使用它？伪元素和伪类一样，添加到选择器...

wenyiweb 2019-08-21 17:28 评论0 收藏0
我不知道你知不知道我知道的伪元素小技巧

摘要：伪元素伪元素能做什么我们要他有何用它能为我们解决什么问题和其他的方法相比她有什么有点我们为什么要使用它伪元素和伪类一样，添加到选择器，但是不是描述状态，他允许我们为元素某些部分设置样式利用伪元素，我们可以简化页面的标签，同时用起来也很方便，伪元素伪元素能做什么？我们要他有何用？它能为我们解决什么问题？和其他的方法相比她有什么有点？我们为什么要使用它？伪元素和伪类一样，添加到选择器...

guyan0319 2019-08-01 17:56 评论0 收藏0