添加填充时如何防止扩展外部元素？ [复制]答案

【问题标题】：How do you prevent expanding outer element when adding padding? [duplicate]添加填充时如何防止扩展外部元素？ [复制]
【发布时间】：2012-01-07 19:25:23
【问题描述】：

我不是设计师。在编写 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)"。它运行良好，但也意味着现在需要修复字体大小。是否有另一种方法不需要以像素为单位转换所有内容？

【问题讨论】：

字体大小与填充有什么关系？不明白...无论如何，元素的宽度=宽度+填充+边框+边距根据css框模型w3schools.com/css/css_boxmodel.asp
对 CSS3 的支持 calc() 是 so poor 真是太可惜了。这将使这变得轻而易举。

标签： css

【解决方案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+。

【讨论】：

我无法形容这个整洁的花絮对我来说有多棒 - 谢谢！（显然有很多聪明的人在那里，我很惊讶你还没有被赞成一千:)）

【解决方案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 中不起作用

【讨论】：

【解决方案3】：

是的，您必须解决此问题或根据 width + padding 进行调整。使用填充时的实际大小将是

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

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

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

#login {
  width: 100%;
}

它会将输入放在容器的中心。Use Box Model 也如问题 cmets 中所建议的那样。

【讨论】：

【解决方案4】：

有我的解决方案：

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

【讨论】：

【解决方案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/

【讨论】：

奇怪，我的是最好和最便携的答案。它不需要盒子大小，但没有投票:(
您依赖于absolute 定位，这意味着：a）您需要为容器指定高度，b）输入本身没有填充（而是容器具有 填充的错觉），这可能不是所需的视觉效果。如果 IE7 支持是必不可少的，@Niranjan 的答案的一些变化是最实用的。