css – 添加填充时如何防止扩展外部元素？

参见英文答案 > keep padding from making the element bigger?2个
我不是设计师.在编写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.