内跨越溢出外跨

Question

我需要你的帮助，

我似乎无法弄清楚为什么我的内跨越溢出我的外跨？

以下是问题的图片：

这是HTML和CSS标记：

<span style="border: 1px solid blue; display:inline-block; position: relative; width: 100%;">
     <span style="display:inline-block; border:1px solid red; text-align: right; width:100%">
       test
     </span>
</span>

Answer 1

span{
    box-sizing: border-box;
}

<span style="border: 1px solid blue; display:inline-block; position: relative; width: 100%;">
     <span style="display:inline-block; border:1px solid red; text-align: right; width:100%">test</span>
</span>

应用此css规则：

span{
    box-sizing: border-box;
}

  

border-box：宽度和高度属性（以及最小/最大属性）   包括内容，填充和边框，但不包括边距

您可以找到有关box-sizing here

的更多信息

Answer 2

使用此

<span style="border: 1px solid blue; display:inline-block; position: relative; width: 99%;padding: 5px;">
 <span style="display:inline-block; border:1px solid red; text-align: right; width: 100%;">test</span>