CSS之盒⼦的外边距（margin）盒⼦与盒⼦的距离外边距（margin）
margin属性⽤于设置外边距。设置外边距会在元素之间创建“空⽩”，这段空⽩通常不能放置其他内容。
margin-top：上外边距
margin-right：右外边距
margin-bottom：下外边距
margin-left：上外边距
margin：上外边距右外边距下外边距左外边
取值顺序跟内边距相同。
外边距实现盒⼦居中
可以让⼀个盒⼦实现⽔平居中，需要满⾜⼀下两个条件：
1. 必须是块级元素。
2. 盒⼦必须指定了宽度（width）
然后就给左右的外边距都设置为auto，就可使块级元素⽔平居中。
实际⼯作中常⽤这种⽅式进⾏⽹页布局，⽰例代码如下：
.header{ width:960px; margin:0 auto;}
⽂字盒⼦居中图⽚和背景区别
1. ⽂字⽔平居中是 text-align: center
2. 盒⼦⽔平居中左右margin 改为 auto
text-align: center; /*  ⽂字居中⽔平 */
margin: 10px auto;  /* 盒⼦⽔平居中左右margin 改为 auto 就阔以了 */
3. 插⼊图⽚我们⽤的最多⽐如产品展⽰类
4. 背景图⽚我们⼀般⽤于⼩图标背景或者超⼤背景图⽚
section img {
width: 200px;/* 插⼊图⽚更改⼤⼩ width 和 height */
height: 210px;
margin-top: 30px;  /* 插⼊图⽚更改位置可以⽤margin 或padding  盒模型 */
padding是外边距还是内边距margin-left: 50px; /* 插⼊当图⽚也是⼀个盒⼦ */
}
aside {
width: 400px;
height: 400px;
border: 1px solid purple;
background: #fff url(images/sun.jpg) no-repeat;
background-size: 200px 210px; /*  背景图⽚更改⼤⼩只能⽤ background-size */
background-position: 30px 50px; /* 背景图⽚更该位置我⽤ background-position */
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。