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 盒模型 */
  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 */
 }