Question

我在页面中间有3个列框，其中包含以下CSS代码：

.sectionLeft, .sectionMiddle, .sectionRight {
    float: left;
    width: 31%;
    height: 50px;
    padding: 1%;
    background-color: red;
}

虽然我想知道当我尝试将填充更改为6％时突然变得不合适，但这完全是好的。我以为因为3列，会有6％的空白空间。我错了吗？我知道这很难解释，但有人可以为我澄清一下吗？

像这样：第1列：左％1 - 右1％第2列：左％1 - 右1％第3列：左％1 - 右1％

所以基本上我们必须有6％的空间。

Answer 1

这是因为div默认情况下有box-sizing: content-box;，这意味着：

默认。宽度和高度属性（以及最小/最大属性）仅包含内容。不包括边框，填充或边距

因此，当您添加padding时，他们会推送内容。

如何防止这种情况？

box-sizing: border-box;表示：

宽度和高度属性（以及最小/最大属性）包括内容，填充和边框，但不是边距

请参阅下面的代码段进行比较：

＆＃13;

* {
  margin: 0;
  padding: 0;
}
.sectionLeft,
.sectionMiddle,
.sectionRight {
  float: left;
  width: 33.3%;
  height: 50px;
  padding: 6%;
  background-color: red;
  border: white 1px solid;
  /* boder-box includes padding */
  box-sizing: border-box;
}
.sectionOther {
  float: left;
  width: 33.3%;
  height: 50px;
  padding: 6%;
  background-color: red;
  border: white 1px solid;
  /* content box doesn't include padding therefore it overflows */
  box-sizing: content-box;
}

＆＃13;

<!-- these are box-sizing: border-box -->
<div class="sectionLeft">stuff</div>
<div class="sectionMiddle">stuff</div>
<div class="sectionRight">stuff</div>
<!-- these are box-sizing: content-box -->
<div class="sectionOther">stuff</div>
<div class="sectionOther">stuff</div>
<div class="sectionOther">stuff</div>

＆＃13;

You can find more info about box-sizing property here

Answer 2

您需要将其保持在1％。填充设置在每个div的左侧和右侧。因此，对于3个div中的每一个，左右填充（2）等于6＆＃34;实现＆＃34;您指定的填充。所有填充总共需要加起来6％，当你将其设置为1％（1％* 6 = 6％）时。如果你试图将其设置为6％，那么总填充率将为6％* 6 = 36％，并且添加到其他3 31％，这总计为129％。

Answer 3

我感到困惑，浏览器如何计算它真的很蠢。

例如，如果您将框设置为100px并向左和向右添加10px填充，则框大小将为120px padding-left + width + padding-right。

真的很蠢，你需要做的是改变箱子模型的计算算法。您可以使用CSS中的box-sizing属性执行此操作。

box-sizing: border-box;

Working example

Answer 4

在您的示例中，子元素的填充设置为百分比，并且该百分比是根据父容器的大小计算的（无论是父DIV还是整个页面本身）。

.container {
    width: 1000px;
    background: grey;
    height: 500px;
}
.sectionLeft, .sectionMiddle, .sectionRight {
    float: left;
    width: 31%;
    height: auto;
    padding: 1%;
    background-color: red;
}

我为父div（“容器”）添加了一个类。我们将修改其宽度，以便您可以看到它对封闭元素的影响。

父容器的宽度任意设置为1000像素，每个子容器的填充表示为1％，每个子元素将有10个像素的填充（1000 * .01 = 10）。每个子元素的宽度为310像素（31％）。这是930像素的内容，加上60个像素的总填充（三个元素两侧各10个像素），对于父级中使用宽度为990像素，总共提供1000像素。请参阅codepen。

现在，当我们将填充更改为6％时，每个子元素周围将有60个像素的负空间（而不是10个），总共360像素（每个子元素两侧各60像素）），次3个子元素）。添加到总填充（1290）的360像素的930像素内容吹过父容器的1000像素宽度，打破了3列布局。请参阅codepen。

所以你可以看到第一个代码笔的1％填充（总共60个像素）与第二个代码笔的6％填充（总共360个像素）不同，因为填充是从宽度的父节点。

基本填充知识

4 个答案: