外边距（margin）
margin属性用于设置外边距，即控制盒子和盒子间的距离
| 属性 | 作用 |
|---|---|
margin-left | 左外边距 |
margin-right | 右外边距 |
margin-top | 上外边距 |
margin-bottom | 下外边距 |
注意：
margin简写式代表的意义跟padding完全一致。
外边距的典型应用：
外边距可以让块级盒子水平居中，但必须满足两个条件：
- 盒子必须指定了宽度
（ width ） - 盒子左右的外边距都设置为
auto如：div { width: 960px; margin: 0 auto; }
常见写法，以下两种都可以：
-
margin: auto； -
margin: 0 auto;
注意：
以上方法是让块级元素水平居中，行内元素或行内块元素水平居中给其父元素添加 text-align: center 即可
案例：
<style>
* {
margin: 0px;
}
div {
width: 300px;
height: 300px;
border: 1px solid red;
/* margin-left: 30px; */
margin-top: 50px;
margin: 10px auto; /* 上下为10 左右居中 */
margin: 10px auto 10px; /* 上为10,左右居中,下为10px */
margin: 0px auto; /* 上下为0,左右居中 */
}
</style>
</head>
<body>
<div></div>
</body>
