margin

标签：#margin# 时间：2018/10/11 22:17:04 作者：Shino

```java
一 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。
```

margin

欢迎大家关注DataLearner官方微信，接受最新的AI技术推送

相关博客

最热博客