为什么文本框中的填充左边导致宽度大于100％

Question

我有一个带有1 em填充的div。

Inside是一个文本框，宽度设置为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>

Answer 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>