爲什麼在文本框中填充左側導致寬度大於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>