margin
2,842 阅读
一 margin的塌陷现象
不是标准文档流中，没有塌陷现象。竖直方向的margin会叠加。
标准文档流中，竖直方向的margin不会叠加。以较大的为准。
二 margin：0 auto;居中
margin的值可以为auto，表示自动。当left，right两个方向都是auto的时候，盒子居中了。
注意：
①使用margin：0 auto；的盒子必须有明确的width。
②只有标准流的盒子才能使用margin：0 auto；居中。当一个盒子浮动了，绝对定位了，固定定位了，都不能使用margin：0 auto；
③margin：0 auto；是在居中盒子，不是在居中文本。文本居中使用text-align：center；
<style type="text/css" media="screen">
*{
margin: 0;
padding: 0;
}
div{
margin: 0 auto;
width:200px;
height:200px;
border:1px solid red;
text-align: center;
}
div p{
margin: 0 auto;
width: 60px;
height: 60px;
background-color: orange;
}
</style>
</head>
<body>
<div>
<p>文字</p>
</div>
</body>
三 善于使用上级盒子的padding而不是自己的margin
<style type="text/css" media="screen">
*{
margin: 0;
padding: 0;
}
div{
width:300px;
height:300px;
background-color: orange;
border:1px solid red;
}/*如果div不加边框会发现div和p会一起下移 加上边框p才会独自下移*/
div p{
margin-top: 50px;
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
margin这个属性，本质上是描述同级标签之间的距离，最好不要用来表达和上级盒子之间的距离。所以我们一定要善于使用上级盒子的padding，而不是margin。
