外边距

margin取值

• <length>：一个固定值
• <percentage>：百分比根据当前生成盒的包含块的width来计算。注意，margin-top和margin-bottom也是根据其包含块的width来计算的。如果包含块的width取决于该元素，那么产生的布局在CSS2.1是未定义的。
• auto：具体见“计算width与margin”章节。

margin无效的情况

非替换的行内元素上的垂直margin将不会产生任何效果。（所谓替换元素，指的是input、button这样的不同平台不同的，需要根据具体情况替换成平台对应的实体的元素）

此外table-caption、table和inline-table设置margin无效。（这一行是规范中说的，但我自己测了一下，都是可以设置margin的，估计是CSS3修改了）

margin合并

CSS中，两个或多个盒（可能但不一定是兄弟）的相邻margin会被结合成一个margin。外边距按这种方式结合叫做合并，产生的结合的外边距叫做折叠外边距（collapsed margin）。

并不是所有相邻的margin都会合并，以下的margin就不会发生合并：

• 根元素（即html元素）的margin不合并；（经验证，第一个子元素的上margin不会与html元素的上margin合并）
• 相邻元素的水平margin不会合并；
• 相邻元素的垂直margin一般会合并，但如果带有间隙（clearance，是指clear属性产生的、放在上margin上方的额外间距，具体可见https://www.cnblogs.com/hdxg/p/17574033.html）的元素的上margin和下margin相邻，它的margin会和紧挨着的兄弟元素的相邻margin合并，但不会再和父级块的下magin合并。

两个margin是相邻的：

• 当且仅当都属于流内（in-flow）块级盒，处于同一个BFC中。这表明：

• • 浮动的盒与任何其他盒之间的margin不会合并（因为浮动的盒不属于流内块级盒）
  • 建立了新的BFC的元素的margin不会与它们的流内孩子合并margin
• 没有行框（line box）、空隙、内边距和边框把它们隔开来。
• 都属于垂直相邻边界（vertical-adjacent box edges），即形成下列某一对：
  • 盒的上margin与其第一个流内孩子的上margin；
  • 盒的下margin与其下一个流内挨着的兄弟的上margin；
  • 最后的一个流内孩子的下margin与其height计算为auto的父元素的下margin；
  • 盒的上边距和下边距，要求该盒没有建立新的块格式化上下文，并且min-height计算值为0，height计算值为0或auto，还没有流内孩子。（经过验证，这种情况并不会发生合并）

另外，折叠外边距也能与与另一个外边距相邻。