为什么span填充会导致渲染框与其父级重叠?

Ale*_*man 5 html css

请参阅此jsfiddle,例如:http: //jsfiddle.net/FrJRA/1/ 并注意内部跨度的边框与包含div重叠.

我有点理解发生了什么.但我不明白为什么.为什么div增加的尺寸不允许新的高度span

我知道我可以使用,display: inline-block如果我想要这样做,但是inline没有增加父容器大小背后的原因是什么?

sco*_*kel 7

内联元素仅在左/右维度中更改其填充的尺寸.它不会增加元素在顶部/底部方向上的尺寸.这就是为什么你注意到它增加了它的侧面而不是顶部/底部.

更新:找到了触及此内容的W3规范的一部分.

内联,未替换框的垂直填充,边框和边距从内容区域的顶部和底部开始,与"行高"无关.但在计算线框高度时仅使用"线高".CSS 2.1规格