一說起盒模型，大家都會說，content+padding+margin+border。
恩，就這么幾個，概念網站都寫得清清楚楚了，但是你對他們的理解又有多少？
經常遇到“這里怎么回事？”“明明寫了怎么會不起作用？”一找就是半天╮(╯▽╰)╭（我也發生過）。歸根結底還是對本質不夠理解。
這里我就查找了許多資料，整理了一下，現在讓我們來挖挖padding和margin的墳吧 ！
在了解padding和margin之前 ，我們先要知道什么是塊元素，什么是內聯元素（行內元素）。一個表格搞定。
| 塊級元素 | 行內元素 | |
| 常見元素 | div、p、form、ul、ol、li | span、strong、em |
| 特性 | 獨占一行，默認情況下，其寬度自動填滿其父元素寬度 |
不會獨占一行，相鄰行內元素會排列在同一行里，直到一行排不下，才會換行，其寬度隨元素的內容而變化 |
| width、height屬性 | 可以設置，設置了寬度還是獨占一行 | 無效 |
| margin和padding屬性 | 可以設置 | 水平方向的padding-left、padding-right、margin-left、margin-right都產生邊距效果， 但豎直方向的padding-top、padding-bottom、margin-top、margin-bottom卻不會產生邊距效果。 |
| 對應的相關display屬性 | block | inline |
| 切換 | display:inline變成行內元素 | display:block變成塊級元素 |
從上解釋可以看到padding 和margin是針對塊元素的，而對內聯元素 上下設置不起作用。為什么不起作用？
其實並不是不起作用，而是不影響line-height，就是說你的上下padding（或者margin，border）設得再大，它的 line-height 是不變的，所以高度上就看不出什么效果。
來看看一位博友舉得一個例子：
<style>
span{
padding:20px;
color:red;
border:2px solid red;
}
padding:20px;
color:red;
border:2px solid red;
}
</style>
<body>
<p style="width:18em; color:#999;">
關於內聯元素的 padding，margin，border 等等，它們並不是沒有作用，而是不會影響 line-height，就是說你的上下 padding（或者margin，border）設得再大，它的 line-height 是不變的，所以高度上就看不出什么效果。用樓主的例子來說一下
<span>測試span</span>
關於內聯元素的 padding，margin，border 等等，它們並不是沒有作用，而是不會影響 line-height，就是說你的上下padding（或者margin，border）設得再大，它的 line-height 是不變的，所以高度上就看不出什么效果。用樓主的例子來說一下
</p>
</body>
<span>測試span</span>
關於內聯元素的 padding，margin，border 等等，它們並不是沒有作用，而是不會影響 line-height，就是說你的上下padding（或者margin，border）設得再大，它的 line-height 是不變的，所以高度上就看不出什么效果。用樓主的例子來說一下
</p>
</body>
效果圖：
可以看到padding是起作用的。只是line-height沒有變化而已。
這下知道為什么有時候設置了padding，但就是不起作用的原因了吧。
為了更好的記住他，來看看另一位的想法吧：
懶了點吧圖截過來了。0.0
不過我認為很合理，在沒有好的解釋前先記下吧。
如果你想padding上下起作用的話：
1.可以用line-height 屬性
2.display轉化為塊元素，我比較喜歡使用inline-block屬性。
ps:關於解決display：inline-block 在IE下的兼容性解決辦法：
div {display:inline-block;...}
div {display:inline;}
div {display:inline;}
為什么要這樣，牽扯太多，就要去了解haslayout了（一環接一環好可怕.....）
3.浮動 float
[堅持.....每天堅持......一直堅持......]重要的事情說三遍。
