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

Question

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

我有点理解发生了什么。但我不明白为什么。为什么div的大小不会增加以允许span的新高度？

我知道如果我希望这种情况发生，我可以使用display: inline-block，但是inline无法增加父容器大小的原因是什么？

Answer 1

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

更新： 找到了涉及此问题的W3规范的一部分。

  

内联未更换框的垂直填充，边框和边距   从内容区域的顶部和底部开始，无关   与'线高'。但是，只有'线高'才被使用   计算线框的高度。 CSS 2.1 Spec

Answer 2

内联元素并不意味着影响布局，这就是为什么block或inline-block会，但inline范围不会。

Answer 3

在这种情况下，<div>并不意味着改变大小。由于<span>是内联元素。

如果这是您正在寻找修改的功能

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

overflow:auto;

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