关于行内元素垂直padding的疑惑

一直认为行内元素的padding只有在左右两边的方向上才有效，今天被问到垂直方向上的问题，又动手试了试，发现更有意思了。

先上代码，css部分： 注意：给span标签加了padding属性，为了更直观，背景色设了透明度。

span{ padding:40px; background:rgba(0,0,0,.7); border:1px solid #ccc; } p{ background:#ccc; margin:0; } div{ width:100px; height:30px; background:#313131; padding:50px; }

html部分：

<p>p标签</p> <span>span</span>333 <p>p标签</p> <div> div标签 </div>

最终呈现在浏览器当中的结果，如图：

可以看到span标签虽然被padding撑开，但实际上它垂直方向上撑开的空间还是被其他块元素侵占。而给span标签加上背景色后，发现它又是遮盖在其他块级元素之上的。真是奇怪啊。但我暂时还没有找到关于这一点的相关答案，暂且作为一个未明了的点记录在这里。

题外话，希望将来自己有能力成为一个在技术上可以授人以渔的人，而在遇到他人请教时，可以保持谦虚的态度。傲慢，真是忍不住让人心生厌恶想翻个大白眼送你。