margin -------总结（block inline 可置换元素）

margin在块元素、内联元素中的区别

block元素（块元素）大体有：P|H1|H2|H3|H4|H5|H6|UL|OL|PRE| DL | DIV | NOSCRIPT | BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS(随着html5标准的推动，一些元素将被废除，而一些新的元素将被引入)注意的是并不是全部的block元素的默认display属性都是block，像table这种display:table的元素也是block元素。

inline元素（内联元素）大体有：#PCDATA（即文本）| TT | I | B | BIG | SMALL|EM | STRONG | DFN | CODE |SAMP | KBD | VAR | CITE | ABBR | ACRONYM|A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO|INPUT | SELECT | TEXTAREA | LABEL | BUTTON

其中有类特殊的元素：如img|input|select|textarea|button|label等，他们被称为可置换元素（Replaced element）。他们区别通常inline元素（相对而言，称non-replaced element）是：这些元素拥有内在尺寸(intrinsic dimensions),他们能够设置width/height属性。他们的性质同设置了display:inline-block的元素一致（margin依旧能够影响到他的上下左右）。

margin在块级元素下，他的性能能够彻底体现，上下左右任你设定。且记住块级元素的margin的参照基准：前一个元素即相对于自身以前的元素有margin距离。若是元素是第一个元素，则就是相对于父元素的margin距离

（但第一个元素相对于父元素margin-top而父元素又没有设定padding-top/border-top的话要须要印证上面的垂直外边距合并的知识）

margin也能用于内联元素，这是规范所容许的，可是margin-top和margin-bottom对内联元素（对行）的高度没有影响，而且因为边界效果(margin效果)是透明的，他也没有任何的视觉影响。

不过margin-left/margin-right仍是可以对内联元素产生影响的。

应用margin:10px 20px 30px 40px;，左边这个css若是写在inline元素上，他的效果大体是，上下无效果，左边离他相邻元素或者文本距离为40px，右边离他相邻元素或者文本距离为20px。你能够自行尝试一番。

最后在内联元素中还有上文咱们提到的非可置换inline元素（non-replaced element），这些个元素img|input|select|textarea|button|label虽然是内联元素，但margin依旧能够影响到他的上下左右！

 

margin外边距合并：（只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。）

外边距合并指的是，当两个垂直外边距相遇时，它们将造成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

外边距合并（叠加）是一个至关简单的概念。可是，在实践中对网页进行布局时，它会形成许多混淆。

简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将造成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

两个垂直的元素就是兄弟元素：

.div1{ 
width:200px;
 height:100px;
 background-color:red;
border:1px solid red; 
margin-bottom:20px;
}
.div2{ 
width:200px;
 height:100px;
 background-color:blue;
border:1px solid blue; 
margin-top:30px;
}
<div class="div1"></div>
<div class="div2"></div>

　　

div1和div2之间的间距是30px，去二者之间的最大者，无论两个元素是否有边框

 

 

两个div之间是父子关系：

若是二者之间没有border和padding。也会出现外边距合并的状况（不然不会出现外边距合并的状况）

根据规范，一个盒子若是没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

再说了白点就是：父元素的第一个子元素的上边距margin-top若是碰不到有效的border或者padding.就会不断一层一层的找本身“领导”(父元素，祖先元素)的麻烦。

只要给领导设置个有效的 border或者padding就能够有效的管制这个目无领导的margin防止它越级，假传圣旨，把本身的margin当领导的margin执行

.content{
              width:600px;
              margin: 0 auto;
              border: 1px solid #000;
          }

          .info{
              margin-top:20px;
              background-color: red;
              width:200px;
              height:100px;

              margin-bottom:20px;
          }
          .info1{
              margin-top:30px;
              background-color: blue;
              border: 1px solid blue;
              width:100px;
              height:50px;
          }
<div class="content">
    <div class="info">
        <div class="info1"></div>
    </div>
</div>

　　

父元素margin-top为30px,发生外边距合并的状况

p {margin : 10%;}

百分数是相对于父元素的 width 计算的。上面这个例子为 p 元素设置的外边距是其父元素的 width 的 10%。

 

一个完整的margin属性是这么写的margin: top right bottom left;(eg: margin:10px 20px 30px 40px)。

在margin属性中一共有两类参考线，top和left的参考线属于一类，right和bottom的参考线属于另外一类。

top和left是以外元素为参考，right和bottom是以元素自己为参考。

margin的位移方向是指margin数值为正值时候的情形，若是是负值则位移方向相反。

 

总结下来margin 属性能够应用于几乎全部的元素，除了表格显示类型（不包括 table-caption, table and inline-table）的元素，

并且垂直外边距对非置换内联元素（non-replaced inline element）不起做用。

 

BFC（Block Formatting Contexts ） 会阻止外边距折叠

• 浮动元素，float 除 none 之外的值
• 绝对定位元素，position（absolute，fixed）
• display 为如下其中之一的值 inline-blocks，table-cells，table-captions
• overflow 除了 visible 之外的值（hidden，auto，scroll）

 

总结参考：http://www.hicss.net/do-not-tell-me-you-understand-margin/