在 div 周围创建填充？

Question

如何在 div 周围创建填充但不推出容器？

http://codepen.io/vincentccw/pen/jgGtd

我创建了 2divs，但是当我在它周围设置填充时，子 div 被推出了？

原文由 Vincent Chua 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

HTML

 <div>
  <div>lol</div>
</div>

CSS

 div{
  background:yellow;
  width:auto;
  height:auto;
  padding:1em;
}
div div{
 background:red;
}

原文由 Lekhnath 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是默认框模型的正常行为，即填充和边框尺寸被添加到宽度属性。

如果您想避免笨拙的计算，您可以使用 box-sizing 更改默认模型（内容框），如下所示：

 * {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

这将使所有元素的填充和边框成为声明或继承的宽度和高度的一部分，从而保持您的布局完整。

现在，如果您要声明 100% 或 100 像素的宽度，然后添加填充或边框，它不会影响总宽度，而是包含在声明的宽度范围内。

原文由 Matanya 发布，翻译遵循 CC BY-SA 3.0 许可协议