margin(外邊距)

margin 簡寫屬性在一個聲明中設置所有外邊距屬性。該屬性可以有1到4個值

注意： 外邊距控制的是元素外部空出的空間。相反，padding 操作元素內部空出的空間

還有就是上、下外邊框的設置對內聯元素無效，如：<span> 、 <code>

margin屬性構成

• margin-top：上邊距

• margin-bottom：下邊距

• margin-left：左邊距

• margin-right：右邊距

語法

/* 應用於所有邊 */
margin: 1em;
margin: -3px;

/* 上邊下邊 | 左邊右邊 */
margin: 5% auto;

/* 上邊 | 左邊右邊 | 下邊 */
margin: 1em auto 2em;

/* 上邊 | 右邊 | 下邊 | 左邊 */
margin: 2px 1em 0 auto;

/* 全局值 */
margin: inherit;
margin: initial;
margin: unset;

  注意：取值可以為負數！取值為負時元素會比原來更接近臨近元素

margin 屬性接受 1~4 個值：

• 當只指定一個值時，該值會統一應用到全部四個邊的外邊距上。
• 指定兩個值時，第一個值會應用於上邊和下邊的外邊距，第二個值應用於左邊和右邊。
• 指定三個值時，第一個值應用於上邊，第二個值應用於右邊和左邊，第三個則應用於下邊的外邊距。
• 指定四個值時，依次（順時針方向）作為上邊，右邊，下邊，和左邊的外邊距。

margin: 5%;                 /* 所有邊：5% 的外邊距 */

margin: 10px;               /* 所有邊：10px 的外邊距 */

margin: 1.6em 20px;         /* 上邊和下邊：1.6em 的外邊距 */
                            /* 左邊和右邊：20px 的外邊距  */

margin: 10px 3% -1em;       /* 上邊：     10px 的外邊距 */
                            /* 左邊和右邊：3% 的外邊距   */
                            /* 下邊：     -1em 的外邊距 */

margin: 10px 3px 30px 5px;  /* 上邊：10px 的外邊距 */
                            /* 右邊：3px 的外邊距  */
                            /* 下邊：30px 的外邊距 */
                            /* 左邊：5px 的外邊距  */

margin: 2em auto;           /* 上邊和下邊：2em 的外邊距 */
                            /* 水平方向居中            */

margin: auto;               /* 上邊和下邊：無外邊距 */
                            /* 水平方向居中        */

 

備注

1.水平居中

在 IE8-9 這樣的不支持彈性盒布局的舊式瀏覽器中，要實現在父元素中居中，可使用 margin: 0 auto;

2. 外邊距重疊

上下元素的下上外邊距有時會重疊，實際空出的空間長度變為兩外邊距中的較長值，也就是說：誰的外邊距大就顯示誰的外邊距(塌陷)

怎么解決呢？

（1）如果元素處於兄弟關系，可以選擇只給一個盒子設置margin

（2）如果元素處於嵌套關系，可以選擇：給父親添加padding、給父親添加透明下邊框、給父親加overflow：hidden(FTB)