如何让span填充父div宽度并添加padding且不超出父元素？

问题本质是CSS默认盒模型的行为导致的：默认情况下，元素的width属性仅计算内容区域的宽度，当你给span设置width:100%同时添加padding:1rem时，元素的总宽度会变成父容器宽度 + 左右padding的总和，最终超出父div范围（效果截图显示绿色span超出了灰色父div的左右边界）。

下面提供两种简单的解决方法：

方法1：使用box-sizing: border-box（推荐） #

这个属性会让元素的width包含内容、内边距和边框的宽度，彻底解决padding/边框导致的宽度溢出问题。修改后的代码如下：

<div style="width: 30rem" id="parent">
  <span
    style="
      background-color: green;
      display: block;
      padding: 1rem;
      width: 100%;
      box-sizing: border-box;
    ">
   Span
 </span>
</div>

方法2：移除width:100% #

因为你已经给span设置了display: block，块级元素默认会自动占满父元素的可用宽度，此时添加padding会自动从总宽度中扣除，不需要额外设置width:100%。代码修改如下：

<div style="width: 30rem" id="parent">
  <span
    style="
      background-color: green;
      display: block;
      padding: 1rem;
    ">
   Span
 </span>
</div>

内容的提问来源于stack exchange，提问作者user18719885