好的，所以我们知道设置一个对象的填充会导致它的宽度改变，即使它是显式设置的.虽然人们可以争论这背后的逻辑，但它导致了一些元素的问题.
对于大多数情况，您只需添加子元素并向其添加填充，而不是将填充设置为100%，但是对于表单输入，这是不可能的步骤.
看看这个:
body {
font-size: 14px;
margin: 0px;
padding: 0px;
}
DIV.formfield {
clear: both;
margin: 0px;
padding: 10px;
}
DIV.formlabel {
margin-top: 20px;
padding: 5px;
font-weight: bold;
text-align: left;
}
DIV.formvalue {
background-color: #eee;
border: 1px solid red;
padding: 10px;
margin: 0px;
}
DIV.formvalue.correct {
border: 1px solid green;
}
textarea.textarea {
width: 100%;
min-height: 80px;
}
input.input {
width: 100%;
padding: 5px;
}
input.input2 {
width: 100%;
}
input.input3 {
width: 100%;
padding: 5px;
margin: -5px;
}
input.input4 {
width: 100%;
padding: 10px;
margin: -10px;
}
input.input5 {
width: 100%;
padding: 10px;
box-sizing: border-box;
}<div class='formfield' id='field_text'>
<div class='formlabel'>No padding</div>
<div class='formvalue'>
<textarea class='textarea' cols='80' rows='10' name='text'>No padding here</textarea>
</div>
<div class='formlabel'>Also no padding</div>
<div class='formvalue'>
<input type='text' class='input2' name='apa' value='Or here...' />
</div>
<div class='formlabel'>5px padding, which extends the parent element, d'oh!</div>
<div class='formvalue'>
<input type='text' class='input' name='apa' value='I dont want to extend outside the square!' />
</div>
<div class='formlabel'>5px padding and -5px margin, this does the trick, almost...</div>
<div class='formvalue'>
<input type='text' class='input3' name='apa' value='I dont want to extend outside the square!' />
</div>
<div class='formlabel'>10px padding and -10px margin, things are falling apart on the right side</div>
<div class='formvalue'>
<input type='text' class='input4' name='apa' value='I dont want to extend outside the square!' />
</div>
<div class='formlabel'><img src="/bilder/icons/badges/ok.png" width="16" height="16" border="0"> 10px padding and box-sizing: border-box</div>
<div class='formvalue correct'>
<input type='text' class='input5' name='apa' value='I dont want to extend outside the square!' />
</div>
</div>第二个输入的填充设置为5px，这是我非常喜欢的默认设置.但不幸的是，这使得输入在所有方向上都增加了10px，包括在100%宽度上增加10px.
这里的问题是我不能在输入中添加子元素，所以我无法修复它.所以问题是:
有没有办法在输入中添加填充，同时仍然保持100%的宽度？它需要是100%，因为窗体将呈现在不同宽度的父级中，所以我事先不知道父级的宽度.