首先說的是區別：


      如圖所示，黃色padding，綠色margin，中間的content是內容，margin和padding的值是不計算在內容高寬的。這裡補充的是在實際情況中邊框寬度也是不計算在內的。
這裡以border邊框為分界線說：margin是盒子距離另一個盒子的距離，如果瀏覽器頁面中只有一個盒子，那麼他的margin值就是距離頁面的距離，理解為外邊距
#div{
width:100px;
height:100px;
margin-left:100px;
margin-top:100px;

}
    那麼此程式碼代表，距離瀏覽器頁面左邊100畫素，上邊100畫素，需要注意的是當margin值為

#div{
width:100px;
height:100px;
margin：0 auto;

}
這時意思為距離上下0畫素，左右自動，表示水平居中。

以下為寫法和對應意思，padding相同

margin-left:10px; 左外邊距

margin-right:10px; 右外邊距

margin-top:10px; 上外邊距

margin-bottom:10px; 下外邊距

margin:10px; 四邊統一外邊距

margin:10px 20px; 上下、左右外邊距

margin:10px 20px 30px; 上、左右、下外邊距

margin:10px 20px 30px 40px; 上、右、下、左外邊距

padding計算方法，從border邊框開始計算，內容到盒子的距離可以理解為內邊距，注意的是padding和border一樣，都是計算在盒子寬度之外

的
#div{
width:100px;
height:100px;
margin：0 auto;
border：5px solid #566666;
padding:10px;
}
這時盒子的寬度:100+左右padding20+左右邊框10=130畫素
高度計算為100+上下20+上下邊框10=130畫素。
使用padding要提計算好相應的數值，否則寬度和高度會超出預算，造成錯位。也可以佈局好以後將padding和邊框的值從高寬中減除。
這裡說的一個css屬性，boxsizing，他的值有三個border-box，content-box，padding-box
border-box:將padding和borer的計算到寬度高度之中，就是說padding和border不再影響盒子高寬，比較實用
content-box:padding和border不計算在內，那麼這個屬性感覺和不設定沒有什麼區別不實用
padding-box:設定後padding計算在內，border不計算在內
巢狀塌陷
margin在盒子巢狀時的問題，
#div{
width:100px;
height:100px;
margin：0 auto;

}
#div1{
width:100px;
height:100px;
margin-top:10px;
}
div為父級，div1為子集時，按照程式碼應該div1上外邊距距離div10畫素，但實際情況是父級和子集都距離了body上邊距10畫素，這是使用voerflow:hidden，超出部分隱藏，可以解決此問題