添加内边距或外边距会打破浮动布局

Question

我尝试创建像Bootstrap col 一样的CSS网格布局。 我想在左右两侧添加15像素的填充。但是当我添加属性时，它会破坏浮动 (使它们不能并排)。

以下是示例： https://jsfiddle.net/t29q1gcL/ 为什么不起作用？

.grid-4{
  float: left;
  width: 40%;
  background: red;
  padding: 0 15px;
}

.grid-6{
  float: left;
  width: 60%;
  background: blue;
  padding: 0 15px;
}

- GerryofTrivia

---

我强烈建议您在此阅读有关CSS盒模型的内容：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model - nashcheez

Answer 1

将以下内容添加到您的CSS中，参考链接：http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

* {
   box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -ms-box-sizing:border-box;
  -moz-box-sizing:border-box;
}

请查看这个工作的代码示例：https://jsfiddle.net/d8mrdz7x/

- Jishnu V S

---

请使用 MDN 网络（https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model），而不是 w3schools！ :) - nashcheez

Answer 2

添加：box-sizing: border-box;

.grid-4{
  float: left;
  width: 40%;
  background: red;
  padding: 0 15px;
  box-sizing:border-box;
}

.grid-6{
  float: left;
  width: 60%;
  background: blue;
  padding: 0 15px;
  box-sizing:border-box;
}

.clearfix{
  clear: both;
}

- Uladzimir

Answer 3

如果 padding 是一个常量，您可以使用 calc() 函数来分配计算宽度。请查看下面的示例。

.grid-4 {
  float: left;
  width: calc(40% - 30px);
  /* 30px = 15px(padding-right) + 15px(padding-left) */
  background: red;
  padding: 0 15px;
}
.grid-6 {
  float: left;
  width: calc(60% - 30px);
  background: blue;
  padding: 0 15px;
}
.clearfix {
  clear: both;
}

<div class="grid-4">
  <p>content for grid4</p>
</div>
<div class="grid-6">
  <p>content for grid6</p>
</div>
<div class="clearfix"></div>

更新后的代码片段：https://jsfiddle.net/t29q1gcL/11/

- Pugazh

Answer 4

使用 box-sizing:border-box; 样式。因为 box-sizing 属性用于告诉浏览器尺寸属性（宽度和高度）应包括什么。

在宽度计算公式中，width = margin-left -padding-left + width + margin-right -padding-right + border

在您的 CSS 样式中，总宽度超过 100%，您必须使用 60%、40% 和 padding 30px。所以，它会出现问题。

- Pravin Vavadiya

Answer 5

这是因为您为内容区域设置了宽度，而内容区域位于填充、边框和外边距之内。因此，当您指定填充时，总宽度将为60% + 15px。

您可以通过使用嵌套单元格来解决这个问题：

/* remove padding from grid-X classes */

.cell {
  padding: 0 15px;
}

<div class="grid-6">
  <div class="cell">
  <p>content for grid6</p>  
  </div>
</div>

我已经在这里fork了你的jsfiddle: https://jsfiddle.net/9ss09b15/)

你还可以在你的grid-X类中添加box-sizing:border-box;，这将使它包括宽度内的填充和边框，但仍不包括边距。

- Andrey Stolbovsky

Answer 6

使用CSS3的box-sizing属性

box-sizing属性用于告诉浏览器尺寸属性（宽度和高度）应该包括什么。

它们应该包括border-box吗？还是只有content-box（这是width和height属性的默认值）？

与计算包括填充和边框的宽度不同，box-sizing属性结合border-box值将width属性用作实际渲染的宽度。

例如：

.sidebar {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 1px solid #DDD;
}

任何应用的填充或边框都不会添加到呈现宽度中。相反，它将自动从内容区域中可用的空间中减去。这导致代码更易读。以下是一张图片，帮助说明box-sizing: border-box如何计算宽度。

参考资料

https://css-tricks.com/box-sizing/

http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

http://blog.teamtreehouse.com/box-sizing-secret-simple-css-layouts

.grid-4{
  float: left;
  width: 40%;
  background: red;
  padding: 0 15px;
 box-sizing: border-box;
  
}

.grid-6{
  float: left;
  width: 60%;
  background: blue;
  padding: 0 15px;
  box-sizing: border-box;
}

.clearfix{
  clear: both;
}

<div class="grid-4">
  <p>content for grid4</p>
</div>
<div class="grid-6">
  <p>content for grid6</p>
</div>
<div class="clearfix"></div>

- Mike Phils