盒模型的四大家族，原以爲content部分比較複雜，單獨寫了一章，但在看padding部分的時候又遇到一個非常詭異的CSS現象，經過不斷測試，終於得到一個比較接近於“真相”的解釋，在測試這個詭異現象之前，先將padding的一些特性簡單介紹一下，最後再來進行這個測試，本章內容如下小標題所示，請按需查看。
1.padding與塊元素的尺寸
2.padding與內聯元素的尺寸
3.padding的百分比值
4.padding百分比值在內聯元素中的詭異表現
1.padding與塊元素的尺寸
padding是盒模型的內邊距（也稱內補間），在CSS中，box-sizing默認的值是content-box，所以使用padding會增加元素的尺寸，例如 {width:60px;padding:0 20px},如果不考慮其他CSS干擾，此時content-box的寬度是60+20*2=100。爲了方便對照設計稿快速的完成頁面骨架搭建，我們往往會直接取到元素的寬高，而不考慮內邊距是多少，不然你的寬高都需要通過計算才能得到，影響開發效率。因此我們會將box-sizing設成border-box，認爲這樣寬高就固定了，不會隨着padding影響容器尺寸。事實上大部分情況確實如此，但有一種特殊情況你應該瞭解，就是當padding的值足夠大時，padding+content>width時，如下面這種情況：
<style>
.box{
display:block;
width:80px;
padding:0 60px;
box-sizing:border-box;
}
</style>
此時padding > width,那麼元素最終的寬度爲120px，而不是80px，上述表現是針對塊狀特性的元素而言的，對於內聯元素，會有一些細節需要通過實踐來進行說明。
2.padding與內聯元素的尺寸
這裏先糾正一個錯誤的觀點，內聯元素的padding只會影響水平方向，不會影響垂直方向。這種認知是非常片面的，雖然內聯元素在垂直方向的行爲完全受line-height和vertical-align(CSS2.1,flex佈局是CSS3的內容)的影響，視覺上並沒有改變上下兩行的間距，但我們只需要做一個小測試，給內聯元素加上背景色就可以發現，內聯元素在垂直方向上的空間也會受到padding的影響。
<div><span class="havePad">hello</span><span class="havePad">world</span></div>
<style type="text/css">
body{
margin: 40px ;
}
.havePad{
padding: 20px;
border: 1px solid #ccc;
background: yellow;
}
</style>
我們可以看到，padding會影響內聯元素的尺寸，而且當你給父容器加上overflow:auto的時候，父容器還會出現滾動條，這也印證了上面的觀點，所以類似"垂直方向padding對內聯元素沒用"的說法顯然是不正確的。那麼，知道了這個特性之後，我們可以利用它做什麼呢？最常見的作用就是增加元素的點擊區域，比方說文章中的文字鏈接，默認情況下這些鏈接的點擊區域受font-size字體大小控制，這個時候我們只要增加他的上下padding，便可以在"不影響可視佈局"的情況下增大點擊區域。
3.padding的百分比值
padding的屬性與margin不同，padding是不支持負值的，padding的百分比值和寬高的表現略有不同，padding的百分比值無論是水平方向還是垂直方向，都是相對於父容器的寬度進行計算的，因爲CSS默認是水平流，所以寬度值會一直有效。基於padding百分比基於寬度計算的特點可以實現一些特定的功能。作者舉了個固定頭圖的例子，在網頁開發的時候需要一個橫穿整個屏幕的頭圖，如果定製了高度，則可能導致在分辨率較低的屏幕中圖片被壓縮效果不好，這個時候就可以利用padding的寬高百分比都基於寬度計算的特點來實現一個固定寬高比的頭圖。代碼如下
<style>
.box{
position:relative;
padding:10% 50%;
}
.box > img{
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
}
</style>
padding屬性的百分比值在內聯元素的表現略有不同，下面會通過一個詭異的CSS現象來說明padding的百分比在內聯元素中的一些特殊屬性。
4.padding百分比值在內聯元素中的詭異表現
作者在探究padding百分比值對於內聯元素的影響時給出了一段詭異CSS代碼，下面會一步步引導你去探究CSS的詭異事件。有興趣的可以自己在本地測試一下。
代碼如下：
<div class="box">
<span class="span">一二三四</span>
</div>
<style type="text/css">
body{
margin: 0;
padding: 300px;
}
.box{
width: 400px;
height: 100px;
background: green;
}
.span{
line-height: 40px;
padding: 50%;
background: gray;
}
</style>
產生的結果如下：
在結果中產生了兩個比較詭異的樣式：
（1）"一"這個字不見了
（2）生成了一個“五邊形”
原文這樣描述這個問題，“CSS的很多現象難以解釋，原因在於其表現往往是多個屬性多個規則一起生效的結果，例如本例，雖然幾乎沒用實用價值，但是對我們深入理解內聯元素的世界很有幫助”。
關於這個問題的產生，我提取了作者三個比較明確的說明。有助於你理解這段CSS是如何作用的。
（1）對於內聯元素，其padding是會自動斷行的。
（2）padding區域會隨着內容一起換行。
（3）層疊樣式具有覆蓋性，層級相同的樣式，後者>前者。
下面我會一點點解釋這三個點，在這之前，我們可以明確一點，就是padding的百分比值是基於父元素的寬度進行計算的，在本例中，上下左右的padding值均爲400px*50%=200px。（關於padding：50%和padding在內聯元素中的表現請關注本章對padding基礎的一些總結和歸納。）因此該內聯元素最終的寬度=內聯元素content的寬度+左右padding的值。可以確定的是，這個寬度一定>父級元素的寬度，所以該元素會自動斷行也就不奇怪了。至此，我們已經向前邁出了一小步。我們可以看到，"四"這個字，確實是換行了。
這個時候，我們需要做一點小小的改變，我們把內聯元素的背景色去掉，看看會發生什麼。
當我們把background去掉之後，發現“一”其實就在二三的前面，只是好像被背景色給覆蓋了。這裏我們就需要用到作者給出的的第二個和第三個解釋了，首先，由於“四”換行了，導致“四”後面的padding-right區域會隨着內容一起換行。而"一二三"的寬度是padding-left + 3個字的寬度，而"四"換行之後的寬度是padding-left+1個字的寬度，這個時候padding-left和padding-right寬度抵消，由於層疊樣式的覆蓋性，層級相同的樣式，後來的"四"攜帶着換行的padding正好覆蓋了前面一行一個文字長度的區域，導致正好一個"一"字被覆蓋了，同時，由於上面的二三的寬度是多出來的部分，下面的四由於padding換行也多出一個字的高度，因此正好產生了右下角的空白區。至此，我們已經解決了，"一"去哪兒了以及右下角空白部分的問題。
看似上面提出的兩個問題都解決了，但我仍然不滿足，再提出一個問題
（3）爲什麼是"四"換行，而不是"三四”,也不是"二三四"。
要解決這個問題，我們得往這個內容區多加一些字看看，最終我將字添加到一二三四五六七八九十一二三四，才發現最後兩個字"三四"換行了。
由於有兩個字換行，因此遮住了開頭的"一二"，這正好印證了我之前的說法，同時我也提出一個什麼時候字會換行的猜想，根據第二章講到的元素包裹性的內容，我猜測，當內容區未將要超出父容器的寬度減padding-left時，content部分的最後一個子會自動換行，同時寬度自適應，當內容即將要超出父容器的寬度減padding-left時，content多餘的部分會換行。這裏僅根據元素包裹性提出一個猜想，有更好的說明的歡迎指正。