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/