添加填充或边距中断浮动

Question

我尝试创建 CSS 网格，如 bootstrap col。我想从左侧和右侧添加 15px 的填充。但是当我添加属性时它打破了浮动（使其不能并排站立）。

为什么不起作用？

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

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

Answer 1

添加：“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;
}

Answer 2

将此添加到您的 css，参考 link 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;
}

检查工作 fiddle https://jsfiddle.net/d8mrdz7x/

Answer 3

这是因为您为内容区域设置了宽度，而内容区域位于内边距、边框和边距内。因此，当您指定填充时，总宽度将为 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/）

您还可以将 box-sizing:border-box; 添加到您的 grid-X 类，这将使其在宽度上包含填充和边框，但仍然不包含边距。

Answer 4

如果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>

已更新 fiddle: https://jsfiddle.net/t29q1gcL/11/

Answer 5

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

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

在您的 css 样式总宽度中超过 100% 您使用了 60% 、40% 和 padding 30px。所以，休息了。

Answer 6

使用 CSS3 框大小调整属性

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

他们应该包括边框吗？或者只是内容框（宽度和高度属性的默认值）？

box-sizing 属性结合 border-box 值使用宽度属性作为实际呈现的宽度，而不是通过包括填充和边框来计算宽度.

示例：

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

应用的任何填充或边框都不会添加到呈现的宽度。相反，它会自动从内容区域中可用的 space 中减去。这导致代码更具可读性。这是一张有助于说明 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>

添加填充或边距中断浮动

adding padding or margin breaks float

html

css

css-float