向内部 div 添加边距时，在较大 div 内定义宽度的 div 元素溢出答案

【问题标题】：Div elements with defined width inside a larger div are overflowing when adding margins to the inner divs向内部 div 添加边距时，在较大 div 内定义宽度的 div 元素溢出
【发布时间】：2017-02-03 12:39:50
【问题描述】：

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;
}

没有运气。

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

【问题讨论】：

标签： html css

【解决方案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;
}

【讨论】：

完美运行，我从未听说过 calc() 表达式。似乎它可能非常有用。谢谢！

【解决方案2】：

另一种解决方案，不使用margin，而是用边框模拟它。

.container {
  width: 100%;
  height: 250px;
  position: relative;
  background-color: blue;
}
.innerBox {
  width: 25%;
  height: 100%;
  margin: 0;                /* changed this line */
  border: blue 15px solid;  /* added this line */
  box-sizing: border-box;   /* added this line */
  float: left;
  background-color: yellow;
}

https://jsfiddle.net/oyp1zxaq/4/

【讨论】：

【解决方案3】：

一种方法是使用display: flex。

.container {
  width: 100%;
  height: 250px;
  position: relative;
  background-color: blue;
  display: flex;
}
.innerBox {
  width: 25%;
  margin: 15px;
  background-color: yellow;
}

【讨论】：