一說起盒模型，大家都會說，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;
} </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> 效果圖：
可以看到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;} 為什麼要這樣，牽扯太多，就要去了解haslayout了（一環接一環好可怕.....） 3.浮動 float [堅持.....每天堅持......一直堅持......]重要的事情說三遍。
轉載于:https://www.cnblogs.com/webGeek/p/5077108.html