margin-----总结----解析逻辑

margin的解析逻辑

在 margin 中 top、right、bottom、left 的参考线并不一致为一类，而是分为了两类参考线，top 和 left 的参考线属于一类，right 和bottom 的参考线属于另一类。

那他们到底各以什么为参考线呢？top 以 containing block 的 content 上边或者垂直上方相连元素 margin 的下边为参考线垂直向下位移；

left 以 containing block 的 content 左边或者水平左方相连元素 margin 的右边为参考线水平向右位移。

right 以元素本身的 border 右边为参考线水平向右位移；

bottom 以元素本身的border 下边为参考线垂直向下位移。

从上我们可以看到 top 和 left 都是以外元素为参考，而 right 和 bottom 以本元素为参考。

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

物理大小指的是除去 margin，也就是包含 border 以内的 box 大小，而逻辑大小，则是 box 通过 margin 解析规则解析后得到的大小（这或许可以解释为什么IE5会错误解析盒模型）。

结论：（当元素设置宽度之后）

box 最后的显示大小等于 box 的 border 及 border 内的大小加上正的 margin 值。

而负的 margin 值不会影响 box 的实际大小，如果是负的 top 或 left 值会引起 box 的向上或向左位置移动，

如果是 bottom 或 right 只会影响下面 box 的显示的参考线。

如果元素没有设置宽度，则margin负值会改变box的宽度

来自：

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

http://www.51xuediannao.com/html+css/htmlcssjq/css-margin.html

巴特西