html - 向内部 div 添加边距时，较大 div 内定义宽度的 Div 元素会溢出

Question

JSFiddle:https://jsfiddle.net/oyp1zxaq/

本质上，我只是想在较大的 div 中放置四个具有定义宽度的较小 div，但我希望它们在其中间隔开。

我想知道是否有一种方法可以将定义的边距考虑到已经定义的宽度中。

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

我想对此有一个相当简单的答案，但老实说我自己找不到。

我试过将它们添加到内部和外部 div

.innerBox {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

没有运气。

感谢您的任何建议/帮助。

Answer 1

作为the documentation states , box-sizing: border-box 将在元素的宽度/高度计算中包括边框和填充，但不包括边距。

由于边距在您的示例中是固定数量，因此在元素的宽度/高度计算中考虑它的一种选择是使用 calc() expression减去/置换值。

您将使用 width: calc(25% - 30px) 和 height: calc(100% - 30px) 因为 15px 在元素的每一侧。

.container {
  width: 100%;
  height: 250px;
  position: relative;
  background-color: blue;
}
.innerBox {
  width: calc(25% - 30px);
  height: calc(100% - 30px);
  margin: 15px;
  float: left;
  background-color: yellow;
}

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

Updated Example

.innerBox {
  width: calc(25% - 30px);
  height: calc(100% - 30px);
  margin: 15px;
  float: left;
  background-color: yellow;
}

---

当然还有一些更好的选择。例如，您可以使用 flexbox 布局并在父容器元素上应用顶部/底部填充，然后在子 flexbox 元素上应用左/右边距:

.container {
  height: 250px;
  background-color: blue;
  padding: 15px 0;
  box-sizing: border-box;
  display: flex;
}
.innerBox {
  width: 25%;
  margin: 0 15px;
  background-color: yellow;
}

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

Updated Example

.container {
  height: 250px;
  background-color: blue;
  padding: 15px 0;
  box-sizing: border-box;
  display: flex;
}
.innerBox {
  width: 25%;
  margin: 0 15px;
  background-color: yellow;
}