內邊距（padding），指的是盒子的內容區與盒子邊框之間的距離，一共有四個方向：padding-top

padding-right

padding-bottom

padding-left

內邊距會影響盒子的可見框的大小，元素的背景會延伸到內邊距

盒子的大小由內容區、內邊距和邊框共同決定

盒子可見框的寬度= border-left-width + padding-left + width + padding-right + border-right-width

盒子可見框的高度 = border-top-width + padding-top + height + padding-bottom + border-bottom-widt

使用padding可以同時設置四個邊框的樣式，規則和border-width一致

外邊距：
外邊距指的是當前盒子與其他盒子之間的距離，他不會影響可見框的大小，而是會影響到盒子的位置

盒子有四個方向的外邊距：

margin-top

margin-right

margin-bottom

margin-left

由于頁面中的元素都是靠左靠上擺放的，所以注意當我們設置上和左外邊距時，會導致盒子自身的位置發生改變，而如果是設置右和下外邊距會改變其他盒子的位置

外邊距也可以指定為一個負值，如果外邊距設置的是負值，則元素會向反方向移動

如果將left和right同時設置為auto，則會將兩側的外邊距設置為相同的值，就可以使元素自動在父元素中居中，

如果單獨一方設置的話，圖片會靠最右邊或者最左邊

外邊距同樣可以使用簡寫屬性 margin，可以同時設置四個方向的外邊距,規則和padding一樣

用法：（四個值時，順時針順序；三個值時，上、左右、下；兩個值時，上下、左右）

margin: 10px 20px 30px 40px;

外邊距的重疊：

? ??????????垂直外邊距的重疊

? ? ? ? ? ? ? ? ? ? ? ?在網頁中相鄰的垂直方向的外邊距會發生外邊距的重疊

? ? ? ? ? ? ? ? ? ? ? ?所謂的外邊距重疊指兄弟元素之間的相鄰外邊距會取最大值而不是取和，然后覆蓋

? ? ? ? ? ? ? ? ? ? ?如果父子元素的垂直外邊距相鄰了，則子元素的外邊距會設置給父元素

? ? ? ? ? ?兄弟外邊距重疊：

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 調整位置

? ? ? ? ? ? ? ? 父子外邊距重疊：

? ??????????????????????????????方法一：在父子div中間加數字、字母或者文字

????????????????????????????????方法二：在父親的type中設置邊框border-top:1px red solid;

????????????????????????????????? 方法三：給父親設置內邊距padding-top:1px;

????????????????????????????????? 方法四：給父親設置overflow:hidden;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 方法五：? ? ? ? ? ? ? ? ? ?

? ??????????????????????????????????????????????子元素和父元素相鄰的垂直外邊距會發生重疊，子元素的外邊? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?距會傳遞給父元素使用空的table標簽可以隔離父子元的? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?外邊距，阻止外邊距的重疊

經過修改后的clearfix是一個多功能的樣式，既可以解決高度塌陷，又可以確保父元素和子元素的垂直外邊距不會重疊

代碼：

解決父子元素的外邊距重疊

.box1:before{

content: "";

display:table可以將一個元素設置為表格顯示

display: table;

}

解決父元素高度塌陷

.clearfix:after{

content: "";

display: block;

clear: both;

}