CSS - 段落之间的额外垂直间距（简单）答案

【问题标题】：CSS - Extra Vertical Spacing Between Paragraphs (Simple)CSS - 段落之间的额外垂直间距（简单）
【发布时间】：2019-02-26 07:42:31
【问题描述】：

我意识到这是非常基础的，但我在 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;
}

很简单。

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

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

第 1 段和第 2 段下方的空间没有折叠。大约有 26 像素的空间 - 无法记住如何强制填充/边距折叠...

感谢您的任何反馈。

【问题讨论】：

边距在元素周围创造额外的空间。相反，填充在元素内创建额外的空间。使用边距而不是填充，折叠将正常工作。
阅读Introduction to the CSS basic box model

标签： html css stylesheet

【解决方案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;
}

【讨论】：

@ARNK，不客气。如果您认为这是正确的答案，您可以将其作为可接受的答案进行检查。