CSSmargin详解
以下的分享是本⼈最近⼏天学习了margin知识后，⼤有启发，感觉以前对margin的了解简直太浅薄。所以写成以下⽂章，⼀是供⾃⼰整理思路；⼆是把知识分享出来，避免各位对margin属性的误解。内容可能会有点多，但都是精华，希望⼤家耐⼼学习。
以下的分享会分为如下内容：
1.margin 属性的简单介绍
  1.1：普通流的 margin 百分⽐设置
  1.2：绝对定位的 margin 百分⽐设置
2.margin ⽆法适⽤的元素
3.外边距折叠 (Collapsing margins)
  3.1：Collapsing margins 初衷
  3.2：Collapsing margins 类型
    3.2.1：兄弟元素的 margin 重叠
    3.2.2：⽗⼦元素的 margin 重叠
    3.2.3：元素⾃⾝的 margin-bottom 和 margin-top 相邻时也会折叠
4.折叠后 margin 的计算规则
  4.1：参与折叠的 margin 都是正值
  4.2：参与折叠的 margin 都是负值
  4.3：参与折叠的 margin 中有正值，有负值
5.Collapsing margins 解决⽅法
1.margin 属性的简单介绍
  在介绍margin之前，先剖上⼀张W3C标准盒模型的图⽚，以便读者可以查看相关位置。
  margin，顾名思义，叫做外边距。margin的基本属性有以下⼏点
  a：margin 是 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' 的简写，表明 margin 的⼤⼩范围。
  b：margin 值可以是宽度值、百分⽐值或 'auto' 这3者之⼀。注意，margin 必须带有单位，单位可以是像素、英⼨、毫⽶或 em。
  c：margin 百分⽐值是相对于⽗元素的 width 计算的。
  d：当 margin 为 margin:10px 时，表⽰ top,right,bottom,left (逆时针)⽅向都是10px；当 margin 为 margin:10px 20px 时，表⽰上下⽅向为10px，左右⽅向为20px；当 margin 为 margin:10px 20px 5px 时，表⽰top⽅向为10px，左右⽅向为20px，bottom⽅向为5px；当 margin 为 margin:1px 2px 3px 4px 时，表⽰top⽅向为1px，right⽅向为2px，bottom⽅向为3px，left⽅向为4px。
上⾯通过对 margin 的简单介绍，我们知道 margin 的百分⽐值是相对于⽗元素的 width 计算的，但是普通流和绝对定位元素的margin的计算是⼜是不相同的。
  1.1：普通流的 margin 百分⽐设置
在普通流元素中，margin 百分⽐值得计算是依据其⽗元素的 width 计算的。
1        <div class="container">
2            <div class="content"></div>
3        </div>
1      .container {
2        width: 300px;
3        height: 300px;
4        background-color: lightpink;
5        margin: 10px;
6        display: inline-block;  <!--设置此值是有原因的，会在下⾯讲解。-->
7      }
8      .container .content {
9        width: 120px;
10        height: 120px;
11        background-color: lightgreen;
12        margin: 10%;
13      }
可以看出， top left ⽅向的 margin 都是30px ( 300 * 10% = 30)。为⽗元素设置display是有原因的，会在下⾯⼩节提到，稍安勿躁。
注意，margin 四个⽅位的值都是依据⽗元素的 width 计算！
  1.2：绝对定位的 margin 百分⽐设置
在绝对定位元素中，⽗元素若设置了relative/absolute/fixed，则 margin 百分⽐值是依据⽗元素的 width 计算的；⽗元素若⽆设置
relative/absolute/fixed，则 margin 百分⽐值是依据整个页⾯的 width 计算的。
1 .container {
2  width: 300px;
3  height: 300px;
4  background-color: lightpink;
5  display: inline-block;
6 }
7 .container .content {
8  width: 120px;
9  height: 120px;
10  background-color: lightgreen;
11  position: absolute;  /*增加了改该属性*/
12  margin: 10%;
13 }
可以看出，margin 的值计算结果不再是30px了，⽽是变成 137px (我的电脑页⾯宽度为1370px)。这是因为⼦元素container设置了absolute，导致⼦元素脱离⽂档流，四个⽅位的值是依据页⾯进⾏定位，所以 margin值才会发⽣变化。如果想让⼦元素还是依据⽗元素定位，可以为⽗元素设置 relative/fixed/absolute 其中之⼀个值，这样 margin 百分⽐计算还是 30px，跟普通流中margin 的⼀样。同学可以亲⾃尝试⼀下。
2.margin ⽆法适⽤的元素
  有以下元素设置 margin 值是没有效果的。
  a：⾏内元素垂直 margin 值不起作⽤。
  b：margin ⾮ table 类型的元素，以及 table 类型中 table-caption, table-cell 和 inline-table 这3类。例如 TD TR TH 等，margin 是不适⽤的。
  c：对于⾏内⾮替换元素（例如 SPAN），垂直⽅向的 margin 不起作⽤。
3.外边距折叠 (Collapsing margins)
Collapsing margins，即外边距折叠，指的是相邻的两个或多个外边距 (margin) 会合并成⼀个外边距。margin 折叠必须发⽣在普通流元素中。
  3.1：Collapsing margins 初衷
  Collapsing margins 的初衷就是为了让段落显⽰的更加好看。以由⼏个段落组成的典型⽂本页⾯为例。第⼀个段落上⾯的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页⾯顶部的两倍。如果发⽣外边距合并，段落之间的上外边距和下外边距就合并在⼀起，这样各处的距离就⼀致了。
此图来源于
  3.2：Collapsing margins 类型
    3.2.1：兄弟元素的 margin 重叠
1        <div class="container"></div>
2        <div class="an-container"></div>
1 .container {
2  width: 300px;
3  height: 300px;
4  margin-bottom: 10px;
5  background-color: lightpink;
6 }
7 .an-container {
8  width: 300px;
9  height: 300px;
10  margin-top: 10px;
11  background-color: lightgreen;
12 }
    3.2.2：⽗⼦元素的 margin 重叠
两个或多个外边距没有被⾮空内容、padding、border 或 clear 分隔开。
这些 margin 都处于普通流中。
      margin-top 重叠：在没有被分隔的情况下，⼀个元素的 margin-top 会和它普通流中的第⼀个⼦元素(⾮浮动元素等)的 margin-top 相邻。
1        <div class="container">
2            <div class="an-container"></div>
3        </div>
1 .container {
2  width: 150px;
3  margin-top: 10px;
4  background-color: lightpink;
5 }
6 .container .an-container {
7  background-color: lightgreen;
8  width: 100px;
9  height: 100px;
10  margin-top: 10px;
11 }
      margin-bottom 重叠：在没有被分隔的情况下，只有在⽗元素的 height 是 "auto" 的情况下，它的 margin-bottom 才会和它普通流中的最后⼀个⼦元素(⾮浮动元素等)的 margin-bottom 相邻。就是说，⽗元素的height值不能是固定⾼度值。如果⽗元素固定⾼度，那么margin-bottom会⽆效的。代码同上。
    3.2.3：元素⾃⾝的 margin-bottom 和 margin-top 相邻时也会折叠
1 <div >
css固定定位2    <div ></div>
3 </div>
以上代码运⾏后，我们讲得到的是红⾊边框的正⽅形，⽅框的宽⾼都应该是 100px，⾼度不应该是 150px。
4.折叠后 margin 的计算规则
  4.1：参与折叠的 margin 都是正值
1 <div >A</div>
2 <div >B</div>
在 margin 都是正数的情况下，取其中 margin 较⼤的值为最终 margin 值。
  4.2：参与折叠的 margin 都是负值
1 <div >A</div>
2 <div >B</div>
当 margin 都是负值的时候，取的是其中绝对值较⼤的，然后，从 0 位置，负向位移。
  4.3：参与折叠的 margin 中有正值，有负值
1 <div >A</div>
2 <div >B</div>
如果，相邻的 margin 中有正值，同时存在负值会怎样呢？有正有负，先取出负 margin 中绝对值中最⼤的，然后，和正 margin 值中最⼤的margin 相加。其实也就是正负相加就可以了。
上⾯的例⼦最终的 margin 应该是 100 + (-50) = 50px。
5.Collapsing margins 解决⽅法
  解决⽅法有如下：
  a：浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直⽅向上其他元素的 margin 折叠 ( 针对兄弟元素)
    注意: 浮动元素 , inline-block元素 , 绝对定位元素都属于 BFC元素。
  b：创建了块级格式化上下⽂(BFC, blocking formatting context )的⽗元素，⽐如说overflow:hidden，不和它的⼦元素发⽣ margin 折叠(针对⽗⼦元素)。
  c：给⽗元素添加以下内容之⼀都可以避免发⽣ margin 重叠。如添加内容，添加 padding ，添加 border。
  虽然有⽅法解决这个问题。但是⽬前最好的解决⽅案是回避这个问题。也就是，不要给指定元素添加具有指定宽度的内边距或外边距，⽽是尝试将内边距或外边距添加到元素的⽗元素和⼦元素。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。