padding 和 margin 鮮爲人知的一面 ---（深度整理）

時間 2019-11-30

原文原文鏈接

一提及盒模型，你們都會說，content+padding+margin+border。post

恩，就這麼幾個，概念網站都寫得清清楚楚了，可是你對他們的理解又有多少？測試

常常遇到「這裏怎麼回事？」「明明寫了怎麼會不起做用？」一找就是半天╮(╯▽╰)╭（我也發生過）。歸根結底仍是對本質不夠理解。網站

這裏我就查找了許多資料，整理了一下，如今讓咱們來挖挖padding和margin的墳吧！spa

在瞭解padding和margin以前，咱們先要知道什麼是塊元素，什麼是內聯元素（行內元素）。一個表格搞定。3d

	塊級元素	行內元素
常見元素	div、p、form、ul、ol、li	span、strong、em
特性	獨佔一行，默認狀況下，其寬度自動填滿其父元素寬度orm	不會獨佔一行，相鄰行內元素會排列在同一行裏，直到一行排不下，纔會換行，其寬度隨元素的內容而變化blog
width、height屬性	能夠設置，設置了寬度仍是獨佔一行	無效
margin和padding屬性	能夠設置	水平方向的padding-left、padding-right、margin-left、margin-right都產生邊距效果，ci 但豎直方向的padding-top、padding-bottom、margin-top、margin-bottom卻不會產生邊距效果。table
對應的相關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>

　　　　　關於內聯元素的 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>

效果圖：