为什么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不是更大，但现在它也有滚动条。 –

回答