填充占用了额外的空间，我希望我的 div 像引导 div 一样答案

【问题标题】：padding is taking up extraspaces,i want my div's to act like bootstrap div's填充占用了额外的空间，我希望我的 div 像引导 div 一样
【发布时间】：2016-07-30 01:55:53
【问题描述】：

我制作了四个 div，每个 25% 并将它们浮动到左侧。现在，当我为这些 div 中的每一个提供填充时，最后一个 div 不能包含在一行中并向下移动，因为这些 div 中的每一个都占用了超出给定 25% 的额外空间，如下所示：

<div class="container">
  <div class="abc">
  </div>
  <div class="abc">
  </div>
  <div class="abc">
  </div>
  <div class="abc">
  </div>
</div>

.container {
  width: 100%;
  height: auto;
}
.abc {
  width: 25%;
  float: left;
  padding: 15px;
}

但是当我查看引导 div 时，可以说是 col-lg-4 div。 col-lg-4 div 是 33.33%，左右两边有 15px 的内边距，仍然适合同一行。我希望我的 div 以同样的方式行事。我在这里错过了什么？

【问题讨论】：

你试过在 abc 里面放一个 div 并在里面放 padding 吗？
这可能行得通，但那会写更多代码！

标签： html css twitter-bootstrap padding

【解决方案1】：

在.abc div 上使用box-sizing: border-box;。这将导致宽度（和高度）计算包括边框和填充。

【讨论】：

只是出于好奇，如果我想在框之间有 15px 的边距怎么办，（第一个框和第二个框之间的边距为 15 px，第二个和第三个为 15 px，第三个和第四是 15）现在这肯定会将我的最后一个盒子移动到下一行，我想除了将我的盒子的大小从 25% 减小到其他大小之外，没有其他解决方案。有什么办法知道什么尺寸我必须给我的盒子而不做hit and trial。我希望你明白我想说的。