div之间的CSS边距[重复]答案

【问题标题】：CSS Margin between div [duplicate]div之间的CSS边距[重复]
【发布时间】：2018-03-09 02:56:16
【问题描述】：

我有一个非常简单的 html 代码，但我不明白问题出在哪里。

我有这个代码：

.margin {
  margin: 10px;
}

<div>
  <div class="margin">Test test</div>
  <div class="margin">Test test</div>
  <div class="margin">Test test</div>
</div>

所以我希望 div 之间有 20px 的边距。但实际上浏览器只是在div之间输入了10px。

这怎么可能？有人可以帮助我吗？

【问题讨论】：

【解决方案1】：

相邻元素的边距折叠 - 仅应用两者中较大的一个，忽略另一个。看我的例子。

div {
  border: 1px solid green;
}
.margin1 {
  margin: 10px;
}
.margin2 {
  margin: 20px;
}
.margin3 {
  margin: 30px;
}

<div>
  <div class="margin1">Test test</div>
  <div class="margin2">Test test</div>
  <div class="margin3">Test test</div>
</div>

如果你想在你的 DIV 之间有 20px，请按如下方式进行：

div {
  border: 1px solid green;
}
.margin {
  margin: 10px;
  margin-bottom: 20px;
}
.margin:last-child {
  margin-bottom: 10px;
}

<div>
  <div class="margin">Test test</div>
  <div class="margin">Test test</div>
  <div class="margin">Test test</div>
</div>

【讨论】：

【解决方案2】：

它正在合并两个边距。我建议使用类似的东西：

.margin {
  margin: 20px 10px;
}

【讨论】：

【解决方案3】：

这是正常的，“margin”属性的默认行为。边距取两个div之间边距的最大值

如果您希望 div 之间有 20px 的边距，请使用 margin:20px

【讨论】：