非置换内联元素设置padding/border-top

Question

我知道大家要说无效，但是请看代码和表现：
图片描述

    .divNormal{
        height: 200px;
        background:wheat;
    }
    .testInline{
        font-size: 50px;
        line-height: 1;
        background:rosybrown;
        border-top:50px solid rebeccapurple;
        padding-top:50px;
    }

<div class='divNormal'></div>
<span class='testInline'>自身高:50px,padding:50px,border-top:50px</span>

能说说这么渲染的原理吗？

Answer 1

张鑫旭<<css世界>>里有讲 可以自己去看下