Question

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

HTML：

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

CSS：

#outer {
  width: 300px;
}

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

如果您使用该HTML + CSS，则会看到#outer元素大于300px。如果要将#login的{{1}}重新写入width，最简单的解决方案。它运作良好，但也意味着现在需要修复字体大小。还有另外一种方法，我不需要像素一样转换所有内容吗？

Answer 1

你想要的是box-sizing属性。在实践中看一下this jsFiddle。只需添加：

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

到你的#login CSS。 most modern browsers支持此功能，包括IE8 +。

Answer 2

你可以这样css box-sizing属性：

#outer {
  width: 300px;
    background:red;
    height:100px;
}

#login {
  width: 100%;
  padding: 1em;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

http://jsfiddle.net/TQXdn/

box-sizing在IE7中不起作用

Answer 3

是的，您必须修复此问题或根据宽度+填充进行调整。使用填充时的实际大小将是

实际尺寸=定义的宽度+填充宽度+边框宽度

然后，如果您想将其限制为容器大小，请注意the CSS box model

#outer {
  width: 300px;
    border:1px solid red;
    padding:1em;
}

#login {
  width: 100%;
}

它会将输入放在容器的中心.. Use Box Model也会在问题评论中提出。

Answer 4

有我的解决方案：

width : calc( 100% - 10px );
padding: 5px;

Answer 5

#outer {
  width: 300px;
  background:red;
  height:100px;
  position: relative;
}

#login {
  position: absolute;
  left: 1em;
  right: 1em;
  top: 1em;
  bottom: 1em;
}

在此处查看：

http://jsfiddle.net/22ABj/

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

5 个答案:

http://jsfiddle.net/TQXdn/