为什么这些边距会重叠？

Question

在下面的代码片段中，为什么h2和p的外边距会重叠，但p和button的外边距却不会呢？

我已经给背景着色，这样你就可以清楚地看到间距有问题了，尽管所有3个元素具有相同的外边距...

body {
  position: relative;
  width: 100vw;
  height: 100vh;
}

#textContainer {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

#textContainer>* {
  position: relative;
  margin: 15px 0;
  background-color: blue;
  color: #fff;
}

button {
  background-color: transparent;
  border: 2px solid rgb(51, 51, 51);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div id="textContainer" class="col-xs-6">
  <h2>Lorem ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc con non. Proin ut lacus sodales, rutrum mi vel, faucibus lacus. </p>
  <button type="button" class="btn btn-default btn-lg">faucibus lacus</button>
</div>

- Zze

---

根据规范（关于折叠边距），“行内块框的边距不会折叠（即使与它们的流动子元素）。”，因此button元素默认为行内块，因此边距在垂直方向上不会折叠。 - Josh Crozier

@JoshCrozier 谢谢，老实说我完全忘记按钮是行内的了...谢谢提醒。 - Zze

@Josh Crozier：你不妨把它发布为一个答案。 - BoltClock

@BoltClock - 好的，只是因为你坚持 :) - Josh Crozier

@Josh Crozier：我本来想在这里问andi（http://stackoverflow.com/questions/42259688/only-child-when-more-than-one-parent-has-that-only-child）做同样的事情，但我想他们可能不想写一个长篇回答。所以我自己写了一个。 - BoltClock

Answer 1

根据盒子模型规范，inline-block元素的边距不会合并:

8 盒子模型 - 8.3.1 边距合并

inline-block框的边距不会合并（即使是它们的流动子级也是如此）。

默认情况下，button元素具有inline-block的display属性，这意味着默认情况下边距不会合并。

如果将button元素的display属性更改为block等值，则边距将合并，就像您所期望的那样。

body {
  position: relative;
  width: 100vw;
  height: 100vh;
}

#textContainer {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

#textContainer>* {
  position: relative;
  margin: 15px 0;
  background-color: blue;
  color: #fff;
}

button.btn {
  display: block;
  background-color: transparent;
  border: 2px solid rgb(51, 51, 51);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div id="textContainer" class="col-xs-6">
  <h2>Lorem ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc con non. Proin ut lacus sodales, rutrum mi vel, faucibus lacus. </p>
  <button type="button" class="btn btn-default btn-lg">faucibus lacus</button>
</div>

- Josh Crozier

Answer 2

因为 h2,p 是块级元素(block elements)，而 button 是内联块级元素(inline-block element)。对于内联块级元素，边距(margins)不会重叠。

- arturmoroz

---

只有当您为“button”添加“display: block”时，才会显示。 - arturmoroz