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

Question

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

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

但是，当我向文本框添加1em的填充左侧时，文本框宽度会扩大1em，而忽略右侧的填充。所以它现在触及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>