1背景介紹

什麼是MARGIN？

在CSS中margin（外邊距）是指從自身邊框到另一個盒子邊框之間的距離，就是外邊距。

什麼是PADDING?

Padding（內邊距）是指自身的邊框與自身的內容之間的空間，就是內邊距。

2知識剖析

Margin的特性

margin 沒有背景顏色，是完全透明的。

margin 可以單獨改變元素的上，下，左，右邊距，也可以一次改變所有的屬性。

margin 屬性接受任何長度單位，可以是畫素、英寸、毫米、em 、負值、auto、百分數值（百分數是相對於父元素的width計算的，如果父元素的 width 改變，它也會改變）

padding的特性

padding 屬性可以改變上下左右的填充

padding 屬性接受長度值或百分比值，但不允許使用負值。（百分數值是相對於其父元素的 width 計算的，如果父元素的 width 改變，它也會改變）

3常見問題

什麼時候用margin？什麼時候用padding？

4解決方案

什麼時候用margin？

需要在border外側新增空白時

空白處不需要背景（色）時

上下相連的兩個盒子之間的空白，需要相互抵消時。如15px + 20px的margin，將得到20px的空白。

什麼時候用padding？

需要在border內測新增空白時

空白處需要背景（色）時。

上下相連的兩個盒子之間的空白，希望等於兩者之和時。如15px + 20px的padding，將得到35px的空白。

5編碼實戰

6拓展思考

margin重疊

7參考文獻

8更多討論

問:margin有時候會重疊，是什麼原因

答： margin重疊的話只有上下兩個垂直的塊級元素才會發生重疊 

問：如果不想讓他們margin重疊有什麼辦法

答：行內元素不會發生重疊      設定overflow 屬於的元素不會重疊 visible值除外   絕對定位  這些都不會重疊

問：一個margin是10px一個是20px；重疊之後的margin是多少；

答：margin重疊的取值是最大一個margin的值