为什么文本框中的 padding-left 会导致宽度大于 100% [重复]答案

【问题标题】：Why does padding-left in a textbox cause width to be greater than 100% [duplicate]为什么文本框中的 padding-left 会导致宽度大于 100% [重复]
【发布时间】：2017-03-31 09:31:34
【问题描述】：

我有一个 1 em 填充的 div。

里面是一个文本框，宽度设置为 100%。这看起来很好，正如预期的那样，div 内的宽度设置为 1 em。

但是，当我向文本框添加 1 em 的 padding-left 时，文本框的宽度会加宽 1 em，忽略右侧的填充。所以它现在触及了 div 的边缘。

我该如何解决这个问题？

<div style="padding:1em;background-color:pink">
  <input style="width:100%;padding-left:1em" />
</div>

【问题讨论】：

你能发布一个sn-p的代码吗？这将使调试变得更容易。

标签： html css

【解决方案1】：

因为padding 添加在原始宽度之上。除非你设置了box-sizing: border-box，这将允许在计算总宽度时包含padding 和border。

#outer {
  background: red;
  padding: 1em;
}
#text {
  width: 100%;
  padding: 1em;
  box-sizing: border-box;
}

<div id="outer">
  <input type="text" id="text">
</div>

【讨论】：