最近覺得，我學CSS學得太不細致了，margin、padding這些天天都在用的屬性，我卻沒有真正了解它們、掌握它們。今天，就對這兩個屬性做一個細致的總結吧！
文章結構：
- 塊級元素的padding、margin
- 行內元素的padding、margin
- padding使用的小技巧
- 總結
一、塊級元素的padding、margin
首先我們來看MDN對margin取值的解釋：
我們再看MDN對padding取值的解釋：
我們只看取值為<percentage>（即<百分比>）的情況。文檔說道：當margin和padding取百分比的時候，該百分比都是相對于包含該元素的塊的寬度（相對于該塊的百分比）。
對于這句話，有兩個特別重要的要點需要掌握。
1、要點一
按照慣性思維來說，假如我設置子元素的margin/padding-left/right為n%，那么子元素的margin/padding-left/right=父元素寬度 * n%；設置子元素的margin/padding-top/bottom為n%，那么子元素的margin/padding-top/bottom=父元素高度 * n%。嗯，之前我也是這么認為的 ······T^T
實際上，不管設置margin/padding-top/bottom/left/right，子元素的margin/padding-top/bottom/left/right=父元素寬度 * n%。
我們先看margin：
//html
<body>
<div class='parent'>
11
<div class='child'></div>
</div>
</body>
// css
.parent{
width:400px;
height:200px;
background:#ddd;
margin-top:10px;
}
.child{
width:200px;
height:100px;
background:pink;
margin-left:100%;
margin-top:100%;
}
結果：
你看，.child的margin-top是400px而非200px。
我們再看padding：
//html
<body>
<div class='parent'>
11
<div class='child'>
22
</div>
</div>
</body>
// css
.parent{
width:400px;
height:200px;
background:#ddd;
margin-top:10px;
}
.child{
width:200px;
height:100px;
background:pink;
padding-left:100%;
padding-top:100%;
}
結果：
你看，.child的padding-top是400px而非200px。
總結：塊級元素的padding和margin取百分比值的時候，都是相對于父元素的寬度來計算的。
2、要點二
根據要點一我們知道：<percentage>都是相對于父元素的寬度來計算的。
由此又出現了另外一個問題：父元素的寬度具體指什么呢？僅僅包含父元素的內容區域（即box-sizing:content-box）？還是包括父元素的padding、border（即box-sizing:border-box）?甚至包含父元素的margin？
在要點一的解釋中，我沒有給父元素設置padding/border/margin，就是為了消除這三個屬性給父元素寬度帶來的影響。現在，我們就重點來看這三個屬性給父元素寬度帶來的影響。
直接上代碼：
// html
<body>
<div class='parent'>
11
<div class='child'>
22
</div>
</div>
</body>
// css
.parent{
width:400px;
height:200px;
background:#ddd;
margin-top:100px;
margin-left:100px;
padding-top:100px;
padding-left:100px;
border:100px solid yellow;
}
.child{
width:200px;
height:100px;
background:pink;
padding-left:100%;
padding-top:100%;
}
結果：
.child的padding和margin仍為400px，即父元素內容區域寬度。
在上面的測試中，我們沒有對box-sizing進行設置，因此默認的box-sizing為content-box。下面，我們設置box-sizing:border-box，再來看結果：
// html
<body>
<div class='parent'>
11
<div class='child'>
22
</div>
</div>
</body>
// css
*{
box-sizing:border-box;
}
.parent{
width:500px;
height:400px;
background:#ddd;
margin-top:100px;
margin-left:100px;
padding-top:100px;
padding-left:100px;
border:100px solid yellow;
}
.child{
width:300px;
height:300px;
background:pink;
padding-left:100%;
padding-top:100%;
}
為了方便觀察，我們改變父元素的寬度為500px、高度為400px；改變子元素的寬度為300px、高度為300px。結果如下：
.child的padding和margin仍為200px，即父元素內容區域寬度。
總結：子元素的padding、margin的百分比取值都是相對于父元素的內容區域寬度來計算的。
二、行內元素的padding、margin
首先我們將行內元素的padding設置為數值：
// html
<body>
<div>
aaa
<span>xxyy</span>
sssssssssssssssssssssssssssssssssssssssssssssssssssss
</div>
</body>
// css
body{
word-break:break-all;
}
div{
width:400px;
height:200px;
background:#ddd;
padding-top:150px;
}
span{
border:1px solid blue;
background:pink;
padding-left:100px;
padding-right:100px;
padding-top:100px;
padding-bottom:100px;
}
結果：
由圖可知，inline元素可以設置padding-left/right/top/bottom，但是設置padding-top/bottom不改變布局，因而設置padding-top/bottom無效；同時我們看到，inline元素的background區域 = content + padding區域。
我們將上述span中的padding全部改為margin：
// css
span{
border:1px solid blue;
background:pink;
margin-left:100px;
margin-right:100px;
margin-top:100px;
margin-bottom:100px;
}
結果：
我們得到了相同的結論，margin-left/right生效了，但margin-top/bottom沒有生效。
我們將行內元素的padding設置為百分比：
// html
<body>
<div>
aaa
<span>xxyy</span>
tttttsssssssuuuuuuzzzzzzzyyyyyyyhhhhhhh
</div>
</body>
// css
body{
word-break:break-all;
}
div{
width:300px;
height:200px;
background:#ddd;
}
span{
border:1px solid blue;
background:pink;
padding-left:100%;
padding-bottom:100%;
}
結果：
由圖可知，padding-left/bottom相同，均為300px。（同塊狀元素）
總結：
1、inline元素設置padding/margin-left/right生效，但padding/margin-top/bottom不生效；inline元素的高度由字體和行高決定。
2、inline元素的background區域 = content區域 + padding區域。
3、inline元素的padding、margin的百分比取值也是相對于父元素的內容區域寬度來計算的。
三、padding使用的小技巧
我們對padding的使用做一個小拓展，用padding做一個正方形。代碼如下：
// html
<body>
<div class='parent'>
<div class='child'></div>
</div>
</body>
// css
*{
box-sizing:border-box;
}
.parent{
margin:100px auto;
background:#ddd;
padding:100px;
}
.child{
height:0;
background:pink;
padding-top:100%;
overflow:hidden;
position:relative;
}
結果：
.child就是我們需要的正方形。這個正方形是怎么做出來的呢？重點就是.child中的height:0;padding-top:100%;。設置"padding-top:100%"使.child的padding-top與
父元素的寬度相等，而子元素又繼承了父元素的寬度，所以子元素的padding-top與子元素的寬度相等，因此構成了一個正方形。
由此，我們可以設計各種比例的長方形，只需改變子元素的padding-top的百分比即可。
有了上面的鋪墊后，我們來做一個寬高固定為2:1的img（但是不知道img寬高的具體數值）。代碼如下：
// html
<body>
<div class='parent'>
<div class='child'>
</div>
</div>
</body>
// css
*{
box-sizing:border-box;
}
.parent{
margin:100px auto;
background:#ddd;
padding:100px;
}
.child{
height:0;
background:pink;
padding-top:50%;
overflow:hidden;
position:relative;
}
.child>img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
結果：
分析：由于.child的height為0，并且設置了"overflow:hidden"，所以.child無論添加什么元素都無法顯示（因為被hidden了）。這時，對要顯示的img設置絕對定位，并把img覆蓋整個.child，就使img的寬高為2:1。
這樣，在不知道img具體尺寸的情況下，做出了一個寬高比為2:1的img圖片。
四、總結
對于padding、margin這些屬性，行內元素和塊狀元素的相同點：
- padding、margin的百分比取值都是相對于父元素的內容區域寬度來計算的。
- background區域 = content區域 + padding區域。
行內元素和塊狀元素的不同點：
- 行內元素設置padding/margin-top/bottom不生效。
- margin可為負值，但padding不可為負。
另，margin還存在一個“margin合并”的問題，我在博客margin合并中也進行了相應的整理。
由于個人水平有限，博客錯誤之處，煩請指正！
