html - 在 div 周围创建填充？

Question

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

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

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

Answer 1

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

如果您想避免笨拙的计算，您可以使用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% 或 100px 的宽度，然后添加填充或边框，它不会影响总宽度，而是包含在声明宽度的范围内。

Answer 2

HTML

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

CSS

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

Answer 3

填充位于元素内部。我相信你想在这里使用边距，它在块元素之外：

div{
  background:yellow;
  width:400px;
  height:200px;
  margin:1em;
}
div div{
  margin:0; padding:0; border:0;
  background:red;
}

Answer 4

试试这个（可以根据您的操作更改值）。我感谢 SoloLearn 帮助我学习它（该应用程序是 Learn HTML for android）。

<div width:100%;height:100%; style="background-color:white; color:black; padding:20px;">

宽度和高度自动适应，背景颜色使框颜色，颜色为文本颜色，填充在内容后添加空间。如果您想更改填充颜色，也可以嵌套标签，因为我知道在标签内没有值或元素可以做到这一点。