div之间的CSS保证金

Question

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

我有这段代码：

＆＃13;

＆＃13;

.margin {
  margin: 10px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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

Answer 1

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

如果你想在div

之间留出20px的余量，请使用margin:20px

Answer 2

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

.margin {
  margin: 20px 10px;
}

Answer 3

相邻元素的边距会崩溃 - 只会应用两者中较大的一个，而忽略另一个。看看我的例子。

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>