前兩天在台大上課時，剛好提到 display 的各種形態，然後很嗨森的告訴同學，如果你設定任一元素(element)為 display: inline 時，padding-top 以及 padding-bottom 是不會有作用的唷 😆 😆 😆

結果！！就在我邊說邊示範的這個 moment 時！！！！！

他居然 work 惹 🙀 🙀 🙀 🙀 🙀 🙀

當下整個尷尬的無以復加 XD，所以回家找了一些針對 inline element 的說明，然後順便糾正一下自己的觀念 T皿T

OK，以上內心小劇場 + 碎碎唸完畢，讓我們開始認真吸收一下觀念吧～

我在 Head First HTML with CSS & XHTML 找到了一段針對 inline element 的說明，這段內容敘述非常清楚，可以瞬間導正自己的觀念，所以分享給大家：

You can add padding to the top and bottom of inline element, but the padding doesn't affect the spacing of the other inline elements around it, so the padding will overlap other inline elements

Head First HTML with CSS & XHTML

簡單來說，inline element 的確可以使用 padding-top 以及 padding-bottom的語法，但 padding 不會推擠周圍的 inline elements，反而會覆蓋其他的 inline elements。

不太懂也沒關係，我們就直接來看範例囉～

以 padding-bottom 為例

第一段是以p作範例(display:block)，第二段是span(dispaly:inline)。在同樣使用padding-bottom: 1em的設定下，來看一下他們有什麼差別吧！

就我們認知的 HTML element 都是以「堆疊」模式排列而成，所以透過範例可以發現，正常情況我們設定元素的下間距時，他下方的所有元素會因此被往下推擠；但如果將元素的型態改為 inline 時，他下方的元素不會被推擠，反而會讓下方的元素把自己給蓋住。

以 padding-top 為例

我們再來看一個更明顯的例子，現在我把 padding-bottom 改為 padding-top ，看看會發生什麼事情。

如同剛剛說的，元素型態為 inline 時，設定 padding-top 並不會讓自己的往下推移，而是會覆蓋掉前面的元素。

你可以試著把我在 HTML 寫的這段語法加上 class 變成 <span class="padding">

那麼你會發現，同樣的他不會讓自己往下推移，而是會蓋掉前面的元素：

也因此，雖然 inline elements 可以吃到 padding-top 以及 padding-bottom 的設定，但卻不會讓其他元素跟著被推移，造成排版上的一些困擾。我想這就是大家不常使用的原因，導致我只記得結論就是不用 top 跟 bottom XDDD。

如果你之前上過我的課，或是跟我一樣有這種觀念的朋友，希望閱讀這篇文章後可以一起把這個觀念修正過來唷😁

1

發生錯誤。