爲什麼span padding會導致呈現框與其父項重疊？

我有點理解發生了什麼。但我不明白爲什麼。爲什麼不增加div的尺寸以允許span的新高度？

我知道我可以使用display: inline-block如果我希望發生這種情況，但inline未能增加父容器大小的原因是什麼？

您的網址的功能是稍有不當。它應該是。 http://jsfiddle.net/FrJRA/1 – scottheckel

謝謝！固定。 –

「爲什麼'div'的大小沒有增加」爲什麼要這樣做？ – BoltClock

內聯元素只改變其左右尺寸的填充尺寸。它不會增加元素在頂部/底部方向的尺寸。這就是爲什麼你注意到它增加了它的兩側，而不是頂部/底部。

更新：找到涉及此的W3規範的一部分。

內嵌的垂直填充，邊框和邊距，非替換盒開始在內容區域的頂部和底部，並無關與「行高」。但是當計算線框的高度時，只使用「線高」。 CSS 2.1 Spec

2011-08-17 19:21:57 scottheckel

一個很好的視覺解釋http://www.maxdesign.com.au/articles/inline – BoltClock

行內元素並不意味着會影響佈局，這就是爲什麼block或inline-block會但inline範圍不會。

2011-08-17 19:19:38

但他們*做*影響佈局;他們影響父母的寬度就好了。他們的利潤增加了，對。只是不是他們的填充......？ –

Hexxagonal的解釋更好;我不確定爲什麼行內維度可以部分改變，我只是知道這個理論是說它們並不意味着影響塊級元素。但是你是對的：現實堅持認爲兩者以某種方式相互作用。 –

除特殊情況（浮點和絕對定位元素不包含「寬度」和表格單元格內容）外，它們不會影響其父項的寬度。 – bobince

<div>並不意味着在這種情況下更改大小。由於<span>是內聯元素。

如果這是你要找的修改

div, span { 
    border: 1px solid gray; 
}

與overflow:auto;

div, span { 
    border: 1px solid gray; 
    overflow:auto; 
}

2011-08-17 19:23:08 zellio

這是走錯了方向 - 不僅div不是更大，但現在它也有滾動條。 –

回答