Question

基本上我只是试图在较大的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;
}

Answer 2

一种方法是使用display: flex。

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

Answer 3

另一个解决方案，不是使用边距，而是使用边框进行模拟。

{{1}}

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

在向内部div

3 个答案: