你有所不知的margin属性

前言

致谢

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

难学的 CSS

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

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

正文

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

元素尺寸的影响

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

1. 可视尺寸 - clientWidth (border - padding - size)
2. 占据尺寸 - outerWidth (border - margin)

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

首先，两个尺寸都需知足必定的条件。

可视尺寸的影响条件

1. 适用于 没有设定 width/height 的块级元素 (宽高设死了，怎么会影响呢？) 其中不包括 float absolute fixed 元素 ，inline水平 ，table-cell 元素
2. 只适用于水平方向尺寸（margin-left/margin-right）

占据尺寸的影响条件

1. 适用于 block/inline-block 水平元素
2. 适用于 任何方向
3. 与 width/height 值无关
4. inline 元素只影响水平方向 (后面会提到)

影响示例

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

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

百分比单位

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

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

<style>
  #parent {
  margin: 20px 400px;
  width: 100px;
  height: 200px;
}
#child {
  /* 等价于 margin: 5% * 父元素的宽度  10% * 父元素的宽度; */
  margin: 5% 10%;
  /* 父元素的宽度 * 50% */
  width: 50%; 
  /* 父元素的高度 * 50% */
  height: 50%;
}
</style>
<div id="parent">
  <div id="child"></div>
</div>

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

<style>
  #parent {
  width: 100px;
}
#child {
  /* 注意子元素已增长绝对定位，则百分比按照定位属性的祖先元素的宽度计算，
    本例中是浏览器视口 */
  position:absolute; 
  /* 等价于 margin: 5% * 父元素的宽度  10% * 父元素的宽度; */
  margin: 5% 10%;
}
</style>
<div id="parent">
  <div id="child"></div>
</div>

重叠详解

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

发生情景

1. 相邻的兄弟元素
2. 父级和第一个/最后一个子元素
3. 空的块级元素（本身和本身）

重叠条件

1. 块级元素 （不包括 float 和 absolute 元素）
2. 不考虑 writing-mode，只发生在垂直方向 （margin-top/margin-bottom）
3. 父子 重叠条件

• margin-top 重叠

  1. 父元素 非格式化上下文元素 没有设置 overflow:hidden
  2. 父元素没有 border-top 设置
  3. 父元素没有 padding-top 设置
  4. 父元素和第一个子元素之间没有inline元素分割

• margin-bottom 重叠

  1. 父元素 非格式化上下文元素 没有设置 overflow:hidden
  2. 父元素没有 border-bottom 设置
  3. 父元素没有 padding-bottom 设置
  4. 父元素和第一个子元素之间没有inline元素分割
  5. 父元素没有 height ，min-height，max-height 限制

4. 空的块级元素 margin 重叠条件
   1. 元素没有 border 设置
   2. 元素没有 padding 设置
   3. 里面没有 inline 元素
   4. 没有 height，或者 min-height

计算规则

1. 正正取大值

<style>
#top{
  margin-top:30px;
}
#bottom{
  margin-bottom:20px;
}
</style>
<div id="bottom"></div>
<div id="top"></div>
两个元素垂直距离为 : #top元素的 margin-top值

2. 正负值相加

<style>
 #top{
  margin-top:-30px;
}
#bottom{
  margin-bottom:20px;
}
</style>
<div id="bottom"></div>
<div id="top"></div>
两个元素垂直距离为: #top元素的margin-top值 加上 #bottom元素的margin-bottom值

3. 负负最负值

<style>
#top{
  margin-top:-30px;
}
#bottom{
  margin-bottom:-20px;
}
</style>
<div id="bottom"></div>
<div id="top"></div>
两个元素垂直距离为 : #top元素的 margin-top值

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

重叠意义

• 连续段落或列表之类，若是没有margin重叠，排版会不天然。
• 页面中任何地方，嵌套或直接放入任何空的 div，都不会影响原来的布局。
• 遗落空的任意多个 p 元素，不会影响原来的阅读排版。

margin auto

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

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

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

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

示例以下：

<style>
#demo{
  width: 500px;
  margin-right:100px;
  /* margin-left: 100vw - margin-right - width*/
  margin-left:auto;
}
</style>
<div id="demo"></div>

margin:auto 0 !== 垂直居中

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

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

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

失效状况

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

垂直居中

1. writing-mode 与垂直居中

<style>
.father{
  writing-mode: vertical-lr;/* 更改流的方向为 垂直方向 */
}
.son{
  margin: auto;
}
</style>
<div class="father">
  <div class="son"></div>
</div>

2. 绝对定位元素

<style>
.parent{
  position: relative;
}
.child{
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  margin:auto;
}
</style>
<div class="parent">
  <div class="child"></div>
</div>

失效情景

1. inline 水平元素的垂直margin 无效（margin-top/margin-bottom）
2. margin 重叠发生
3. 绝对定位元素非定位方位的 margin值 "无效" 由于 绝对定位元素 脱离了文档流，与相邻元素没有关系，因此它不可能像普通元素同样，设置margin，推走其余元素
4. margin 鞭长莫及 由于 有某些元素破坏了 文档流，设置了 float absolute，形成了假象，margin不会根据 这些破坏元素做为标准
5. display:table-cell/display:table-row 等声明的margin无效！某些替换元素除外，根据各个浏览器的实现方式做为区分。好比，给 button 元素声明 display:table-cell，但在 chrome 中,button 的 display 属性是 inline-block 。
6. 内联特性致使 margin 失效 margin-top: 负无穷， 可是，小到 1em 便无效了。 由于它是内联元素，默认是基线对齐，x字母下边缘对齐，margin 值再大，也不会起做用。

margin负无穷情景解析

其余属性

1. margin-start

• 正常流向，margin-start 等同于 margin-left，二者重叠不相加
• 若是水平流向是从右向左，margin-start 等同于 margin-right
• 在垂直流下 ( writing-mode:vertical-*; ) margin-start 等同于 margin-top

2. margin-end 与 margin-start 相对

3. margin-before 默认状况等同于 margin-top

4. margin-after 默认状况等同于 margin-bottom

5. margin-collapse

• margin-collapse:collapse;

  (默认值) 发生重叠

• margin-collapse:discard;

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

• margin-collapse:separate;

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

---

结束语

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

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