参见英文答案 >
keep padding from making the element bigger?2个
我不是设计师.在编写CSS时,我经常需要在元素中添加一些填充.你如何避免填充传播到父元素？
我不是设计师.在编写CSS时,我经常需要在元素中添加一些填充.你如何避免填充传播到父元素？
HTML：
<div id="outer"> <input id="login"> </div>
CSS：
#outer {
width: 300px;
}
#login {
width: 100%;
padding: 1em;
}
如果您使用该HTML CSS,您将看到#outer元素大于300px.如果要将#login的宽度重写为“300px – to_pixel(1em)”,最简单的解决方案.它运作良好,但也意味着现在需要修复字体大小.还有另外一种方法我不需要像素转换所有内容吗？
解决方法
你想要的是
box-sizing酒店.在实践中看一下
this jsFiddle吧.只需添加：
-moz-Box-sizing: border-Box; -webkit-Box-sizing: border-Box; Box-sizing: border-Box;
到你的#login CSS.这在most modern browsers中得到支持,包括IE8.
