內(nèi)邊距（padding），指的是盒子的內(nèi)容區(qū)與盒子邊框之間的距離，一共有四個(gè)方向：padding-top

padding-right

padding-bottom

padding-left

內(nèi)邊距會(huì)影響盒子的可見(jiàn)框的大小，元素的背景會(huì)延伸到內(nèi)邊距

盒子的大小由內(nèi)容區(qū)、內(nèi)邊距和邊框共同決定

盒子可見(jiàn)框的寬度= border-left-width + padding-left + width + padding-right + border-right-width

盒子可見(jiàn)框的高度 = border-top-width + padding-top + height + padding-bottom + border-bottom-widt

使用padding可以同時(shí)設(shè)置四個(gè)邊框的樣式，規(guī)則和border-width一致

外邊距：
外邊距指的是當(dāng)前盒子與其他盒子之間的距離，他不會(huì)影響可見(jiàn)框的大小，而是會(huì)影響到盒子的位置

盒子有四個(gè)方向的外邊距：

margin-top

margin-right

margin-bottom

margin-left

由于頁(yè)面中的元素都是靠左靠上擺放的，所以注意當(dāng)我們?cè)O(shè)置上和左外邊距時(shí)，會(huì)導(dǎo)致盒子自身的位置發(fā)生改變，而如果是設(shè)置右和下外邊距會(huì)改變其他盒子的位置

外邊距也可以指定為一個(gè)負(fù)值，如果外邊距設(shè)置的是負(fù)值，則元素會(huì)向反方向移動(dòng)

如果將left和right同時(shí)設(shè)置為auto，則會(huì)將兩側(cè)的外邊距設(shè)置為相同的值，就可以使元素自動(dòng)在父元素中居中，

如果單獨(dú)一方設(shè)置的話，圖片會(huì)靠最右邊或者最左邊

外邊距同樣可以使用簡(jiǎn)寫屬性 margin，可以同時(shí)設(shè)置四個(gè)方向的外邊距,規(guī)則和padding一樣

用法：（四個(gè)值時(shí)，順時(shí)針順序；三個(gè)值時(shí)，上、左右、下；兩個(gè)值時(shí)，上下、左右）

margin: 10px 20px 30px 40px;

外邊距的重疊：

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

? ? ? ? ? ? ? ? ? ? ? ?在網(wǎng)頁(yè)中相鄰的垂直方向的外邊距會(huì)發(fā)生外邊距的重疊

? ? ? ? ? ? ? ? ? ? ? ?所謂的外邊距重疊指兄弟元素之間的相鄰?fù)膺吘鄷?huì)取最大值而不是取和，然后覆蓋

? ? ? ? ? ? ? ? ? ? ?如果父子元素的垂直外邊距相鄰了，則子元素的外邊距會(huì)設(shè)置給父元素

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

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 調(diào)整位置

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

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

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

????????????????????????????????? 方法三：給父親設(shè)置內(nèi)邊距padding-top:1px;

????????????????????????????????? 方法四：給父親設(shè)置overflow:hidden;

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

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

經(jīng)過(guò)修改后的clearfix是一個(gè)多功能的樣式，既可以解決高度塌陷，又可以確保父元素和子元素的垂直外邊距不會(huì)重疊

代碼：

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

.box1:before{

content: "";

display:table可以將一個(gè)元素設(shè)置為表格顯示

display: table;

}

解決父元素高度塌陷

.clearfix:after{

content: "";

display: block;

clear: both;

}