使用 HTML、CSS 開發一個網站 - 補充(1)-理解inline元素的CSS box model

每個元素都會被渲染成矩形盒子(有content/padding/border/margin)

根據元素的display屬性

可能會是block/inline box

Inline box會被水平放在一個叫做line box的東西裡

如果沒有足夠水平空間來把所有的元素放進同一列

另一個line box會被在第一個line box下方建立

單一inline元素會被分割而跨列 

當inline box跨列時，邏輯上還是單一個box

這代表水平padding/border/margin只會在

第一列的開頭跟第二列的結尾被套用

下面可看到，設定左右padding在箭頭處並沒有作用 

 而且任何垂直padding/border/margin並不會把上下的元素推開

但是注意：

垂直padding/border仍然有套用

padding也會把border往外推 

如果需要調整列高，使用line-height

原文出處

https://hacks.mozilla.org/2015/03/understanding-inline-box-model/