CSS盒模型之margin

margin的塌陷现象

标准文档流中，竖直方向的连个相邻的盒子的margin不叠加，以较大的为准。这就是margin的塌陷现象。例如：

        

此时两个盒子间的空白间隙是60px

如果不在标准流中，比如盒子都浮动了，那么两个盒子间是没有塌陷现象的。例如：

             

此时两个盒子之间的空白间隙是90px

margin 盒子居中

margin：0 auto

margin值可以为auto，表示自动。当left、right两个方向都为auto时，盒子居中：

margin-left: auto;  margin-right: auto;

 简写为

margin:0 auto;

注意：

（1） 使用margin:0 auto; 的盒子，必须有明确的width。

（2）只有标准流的盒子，才能使用margin:0 auto; 居中。即，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0 auto;

（3） margin:0 auto;是在居中盒子，不是居中文本。

（4）文本的居中：text-align:center;

margin:0 auto;   → 让这个div自己在大容器中居中。 text-align: center;  → 让这个div内部的文本居中。

 

普及一下知识，text-align还有

1 text-align:left;     没啥用，因为默认居左 2 text-align:right;    文本居右