html - CSS - 段落之间的额外垂直间距(简单)

Question

我意识到这是非常基础的，但我在 Firefox 中设置了一个非常简单的 HTML 页面...

html {
  margin: 0; padding: 0;
  font-size: 62.5%;
}

p {
  text-align: justify;
  font-family: verdana, sans-serif;
  font-size: 1.6rem;
  width: 90%;
  margin: 0 auto; 
  padding: 1rem 0 1rem 0;
}

很简单。

但是，假设我有三个段落。

在第一段之上，有大约 13px 的空间。最后一段下方还有 13px 的空间。

第 1 段和第 2 段下方的空间并未塌陷。大约有 26 像素的空间 - 很难记住如何强制填充/边距折叠......

感谢任何反馈。

Answer 1

当两个垂直边距相互接触且较大的边距覆盖另一个时，边距会折叠。这是修改后的代码:

html {
  margin: 0; padding: 0;
  font-size: 62.5%;
}

p {
  text-align: justify;
  font-family: verdana, sans-serif;
  font-size: 1.6rem;
  width: 90%;
  margin: 1rem auto;
}