首先說的是區別：
如圖所示，黃色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，超出部分隱藏，可以解決此問題