为何浮动label元素导致父元素#border的padding仅向外扩展而非内推元素？

效果对比 #

当前代码 #

CSS代码 #

h1 {
  color: blue;
  padding-left: .75em;
}

p {
  padding-left: 1.50em;
}

div {
  margin-bottom: 0.5em;
}

label {
  float: left;
  width: 16em;
  text-align: right;
}

input {
  margin-left: 1em;
}

.formDiv {
  text-align: center;
}

#border {
  border: .25em solid blue;
  display: inline-block;
}

#calculate,
#clear {
  margin-bottom: 1em;
}

HTML代码 #

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="salesTax.css">
    <title>Sales Tax Calculator</title>
  </head>

  <body>
    <main>
      <div id="border">
        <h1>Sales Tax Calculator</h1>
        <p>Enter Subtotal and Tax Rate and click "Calculate".</p>
        <form>
          <div class="formDiv">
            <label for="subtotal">Subtotal:</label>
            <input type="text" id="subtotal">
          </div>
          <div class="formDiv">
            <label for="taxRate">Tax Rate:</label>
            <input type="text" id="taxRate">
          </div>
          <div class="formDiv">
            <label for="salesTax">Sales Tax:</label>
            <input type="text" id="salesTax" disabled>
          </div>
          <div class="formDiv">
            <label for="total">Total:</label>
            <input type="text" id="total" disabled>
          </div>
          <div class="formDiv">
            <input type="button" id="calculate" value="Calculate">
            <input type="button" id="clear" value="Clear">
          </div>
        </form>
      </div>
      <script src="salesTax.js"></script>
    </main>
  </body>

</html>

问题描述 #

观察发现，给label设置的float: left会使其占据.formDiv的空间，让标签位于输入框左侧。希望标签和输入框更居中，尝试给#border添加padding，但只会让#border向外扩展，而非挤压内部元素。

这是为什么？ 有没有办法在不删除现有任何CSS的情况下解决该问题？（仅可修改#border的CSS代码，其余CSS为规定内容，但可在其基础上添加样式。）

原因分析 #

这是因为CSS默认的box-sizing属性值为content-box，此时元素的总宽度计算公式为：总宽度 = 内容宽度 + padding + border宽度。给#border添加padding后，padding会被追加到元素原有内容宽度的外侧，导致整个元素向外扩张，无法挤压内部元素的空间。

解决方案 #

仅修改#border的CSS代码，添加box-sizing: border-box属性，让padding包含在元素的总宽度内，同时设置合适的padding值，就能让内部元素向内收缩，实现标签和输入框更居中的效果。修改后的#border代码如下：

#border {
  border: .25em solid blue;
  display: inline-block;
  box-sizing: border-box;
  padding: 0 2em; /* 左右padding可根据视觉需求调整 */
}

如果需要适配不同屏幕宽度，避免容器过宽，还可以添加max-width属性：

#border {
  border: .25em solid blue;
  display: inline-block;
  box-sizing: border-box;
  padding: 0 2em;
  max-width: 90%; /* 限制最大宽度，适配小屏幕 */
}

这样修改后，既保留了所有原有CSS规则，又能让标签与输入框区域更居中，同时#border不会无限制向外扩展。

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