行内级元素的border怎么会被算进内容区？

Question

正在看background-clip属性，控制背景绘制的延申区域

对于background-clip：content-box,背景被裁剪至内容区（content box）外沿

测试块级元素不用说，没跑的，于是我准备测试下行内级元素

本来心里觉得肯定一样但还是测试了一下，结果有个地方让我想不通：

.test{
      width: 500px;
      height: 360px;
      line-height: 360px;
      text-align: center;
      margin: 50px auto;
      border: 1px solid black;
}
span{
      padding: 50px;
      font-size: 32px;
      background-color: #ccc;
      border: 10px dashed #03A9F4;
      background-clip: content-box;
}
<div class="test">
    <span>内容区</span>
</div>

我设置了padding和border，默认下行内元素背景颜色一样填充到边框下，应用background-clip: content-box就只延申到内容区了...

到此为止没问题，但当我去掉boder时发现内容区也减小了，我设置的背景颜色延申到内容区是前提不变的，行内级元素内容区的大小不是由字体字号决定的吗？至于说行高那是计算行盒的与这里无关啊行内级元素背景颜色不会流进line-height啊，行内级元素内容区说的是em-square字体设计的字符框

重点是可以看到boder在没有设置padding下不是在内容区外边绘制而是直接在内容区里面，此时border算进内容区了，也就是说增加了内容区大小了

想不通为什么，希望各位指点小弟一下，谢谢

Answer 1

???我好像没看懂你的意思。解释下就是：
background默认是渲染到border-box的区域的，也就是含border+padding的区域，你不理解的的点是误会了背景（盒子）和文字（内容）的关系？