テキストボックスの余白が100％を超えるようになるのはなぜですか？

Question

divの1つのパディングがあります。

内部はテキストボックスで、幅は100％に設定されています。これはうまく見え、期待通りにdivの内側に1 emを設定します。

ただし、テキストボックスに1桁のパディングを追加すると、右側のパディングを無視して、テキストボックスの幅が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>