关于Margin

资料原文

1 margin的重要性

margin作为CSS盒模型基本组成要素之一，是非常Basis的一个技术手段。

2 margin经常被用来做什么？

• 让块元素水平居中
• 让元素之间留有舒适的空白
• 处理特殊的first或last【不懂】
• 一些布局

3 需要注意的地方

• margin折叠
• margin的百分比值
• margin的auto值
• margin和相对偏移top，right，botton，left的异同
• IE6浮动双margin bug
• IE6浮动相邻元素3px bug

keyword auto

auto是margin的可选值之一，一般用法是margin:0 auto;和margin:
auto;

为什么不论margin:auto还是margin:0 auto效果都是一样的，都是让元素水平居中了，但纵向并没有任何变化。

大家都知道，margin是复合属性，也就是说margin:auto，其实相当于margin:auto auto auto auto，四个值分别对应上右下左。

根据规范，margin-top:auto和margin-botton:auto，其计算值为0.这也就解释了为什么margin:auto等同于margin:0 auto。

规范原文：
On the A edge and C edge, the used value of ‘auto’ is 0.
翻译：如果场景是A和C，那么其auto计算值为0.

为什么auto能实现水平居中？

这是因为水平方向的auto，其计算值取决于可用空间（剩余空间）。

原文：On the A edge and C edge, the used value of ‘auto’ is 0.
翻译：如果场景是B和D，那么其 auto 计算值取决于可用空间。