html - 填充占用了额外的空间，我希望我的 div 像 bootstrap div 一样

Question

我制作了四个 div，每个 25% 并将它们 float 到左侧。现在，当我为这些 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;
}

但是当我查看 bootstrap div 时，让我们说一下 col-lg-4 div。 col-lg-4 div 占 33.33%，左右两边也有 15px 的内边距，但仍适契约(Contract)一行。我希望我的 div 以同样的方式运行。我在这里错过了什么？

Answer 1

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