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

Question

我不是设计师.在编写CSS时,我经常需要在元素中添加一些填充.你如何避免填充传播到父元素？

HTML:

<div id="outer">
  <input id="login">
</div>

CSS:

#outer {
  width: 300px;
}

#login {
  width: 100%;
  padding: 1em;
}

如果您使用该HTML + CSS,您将看到该#outer元素大于300px.最简单的解决方案,如果要重新写#login的width到"300px - to_pixel(1em)".它运作良好,但也意味着现在需要修复字体大小.还有另一种方法,我不需要转换所有像素？

Answer 1

你想要的是盒子大小的属性.在实践中看看这个jsFiddle.只需添加:

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

到你的#loginCSS.大多数现代浏览器都支持此功能,包括IE8 +.