Question

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

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

Answer 1

HTML

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

<强> CSS

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

Answer 2

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

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

Answer 3

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

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

Answer 4

尝试此操作（可以根据您的操作更改值）。我认为SoloLearn帮助我学习它（应用程序是学习HTML for android）。

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

宽度和高度自动适合自己，背景颜色使框颜色，颜色是文本颜色，填充增加内容后的空间。如果要更改填充颜色，也可以嵌套标记，因为我没有在标记内部执行此操作的值或元素。

在div周围创建填充？

4 个答案: