我真不懂margin

 　　平时不少问题，大可能是知其然不知其因此然形成的。因此，明白了原理，在遇到问题就有了分析的思路。因此，我但愿你们在遇到非标准的问题的时候，也就所谓的某些bug的时候，
多去探查一下，为何会产生这种问题。解决的原理是什么，别解决了就算完了。如今的省事，会给你未来的成长埋下隐患。

　　而每每所谓的bug，是对规范，原理的理解不透彻形成的。
　　因此多问个为何，虽尺有所短，但假以时日，必寸有所长。

 

本文主要涉及如下知识点点：

• 垂直外边距合并
• 何时用maigin，何时用padding
• 行内替换元素和费替换元素
• margin的基线
• 盒子的物理大小，显示大小，逻辑大小
• 浮动触发haslayout

了解了这些，就能够说margin我是懂点了。距离真正懂还差得远。下面是针对本身状况的一些笔记和总结。

具体详细的文档可参考  圆心、海玉的文章和w3c上的规范。　

http://www.planabc.net/2007/03/18/css_attribute_margin/　   圆心

http://www.hicss.net/do-not-tell-me-you-understand-margin/   海玉

http://www.w3cplus.com/css/the-definitive-guide-to-using-negative-margins.html  大漠老师网站

 

感谢前辈们的心血。

 

 

---

 

1. margin下面，父元素的背景能够看到。能够说margin的地方是透明的
   
2. 当一个元素位于另外一个元素中，且这个父元素没有东西来和子元素隔开（父元素有border或者padding均可以隔开子元素），那父元素与子元素的上/下外边距也会合并。
   

    

   
   
3. 只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
   外边距合并只发生在垂直方向上，水平方向上是不会发生外边距合并的。
4. 
   实际工做中，垂直外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，并且只在标准浏览器下(FirfFox、Chrome、Opera、Sarfi)产生问题，IE下反而表现良好。
   像水同样，接触后融合。但大小是以前大的那个。
5. 根据规范，一个盒子若是没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。
   注意，脱离文档流后不受影响。

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

 　　其中有类特殊的元素：如img|input|select|textarea|button|label等，他们被称为可置换元素（Replaced element）

1. 
   他们区别通常inline元素（相对而言，称non-replaced element）是：这些元素拥有内在尺寸(intrinsic dimensions),他们能够设置width/height属性。他们的性质同设置了display:inline-block的元素一致。
   margin也能用于内联元素，这是规范所容许的，可是margin-top和margin-bottom对内联元素（对行）的高度没有影响，而且因为边界效果(margin效果)是透明的，他也没有任何的视觉影响。
2. 给行内非替换元素设置上下margin是没用的。并且行内元素不会发生外边距合并。外边距合并只在垂直方向上。
   注意&nbsp也会占个位置
   行内替换元素，能够设置宽高，margin上下也会有效果。且不会在水平方向上有外边距合并，仍是那句话，外边距合并只在垂直方向上。
3. margin 属性能够应用于几乎全部的元素，除了表格显示类型（不包括 table-caption, table and inline-table）的元素，并且垂直外边距对非置换内联元素（non-replaced inline element）不起做用。
   置换元素（replaced element）主要是指 img, input, textarea, select, object 等这类默认就有 CSS 格式化外表范围的元素。
4. 何谓参考线？参考线就是 margin 移动的基准点，此基准点相对于 box 是静止的。而 margin 的数值，就是 box 相对于参考线的位移量。

 

从上咱们能够看到 top 和 left 都是之外元素为参考，而 right 和 bottom 以本元素为参考。上面的位移方向是指 margin 数值为正值时候的情形，若是是负值则位移方向相反。
box 的实际大小 = box 的物理大小 + 正的 margin

这仅对元素自己有效，对于其后面的相关元素，他们则只以 margin 的逻辑大小为准则，进行布局。

 

结论：

box 最后的显示大小等于 box 的 border 及 border 内的大小加上正的 margin 值。而负的 margin 值不会影响 box 的实际大小，若是是负的 top 或 left 值会引发 box 的向上或向左位置移动，若是是 负的bottom 或 right 只会影响下面 box 的显示的参考线。

　　实际的逻辑大小，是按照边边来算的。

1. 基线，逻辑大小，物理大小，显示大小。
   基线是margin的关键。逻辑大小改变后，下一个block基线位置就变了，最后的定位仍是看基线位置。尤为是上面和左面。
2. 行内元素，设置了浮动，就能够设置宽高了
   float:left等浮动属性可让inline元素haslayout，会让inline元素表现得跟inline-block元素的特性同样，支持高宽，垂直margin和padding等

IE6/7/8下auto margin居中bug： 

发生场合：给block元素设置margin auto没法居中 解决方法：出现这种bug的缘由一般是没有Doctype，而后触发了ie的quirks mode，加上Doctype声明就能够了。在《战胜IE的葵花宝典》里给出的方法是给block元素添加一个width可以解决，但根据本人亲测，加with此种方法是无效的，若是没有Doctype即便给元素添加width也没法让block元素居中。

 原理分析：缺乏Doctype声明。

IE8下input[button | submit] 设置margin:auto没法居中
发生场合：ie8下，若是给像button这样的标签（如button input[type="button"] input[type="submit"]）设置{ display: block; margin:0 auto; }若是不设置宽度的话没法居中。
解决方法：能够给为input加上宽度
原理分析：IE8浏览器Bug。

IE8百分比padding垂直margin bug：
发生场合：当父元素设置了百分比的padding，子元素有垂直的margin的时候，就好像父元素被设置了margin同样。
解决方法：给父元素加一个overflow:hidden/auto。
原理分析：IE8浏览器Bug。