Question

当我使用<p>标记开始或结束我的HTML文档的某个部分时，它会在前/后部分之间添加“无人认领”的空格。

示例：

<!DOCTYPE html>
<html>
<style>
header {background-color: gray}
div.content {background-color: lightblue}
footer {background-color:gray}
</style>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0,width=device-width">
  <title>This is the title.</title>
</head>
<body>
  <header>
  This is the header.
  </header>
  <div class="content">
    <p>This is paragraph #1</p>
    <p>This is paragraph #2</p>
  </div>
  <footer>
    This is the footer
  </footer>
</body>
</html>

结果：

Space outside tags

请注意<body>代码导致<p>上方和下方插入的空格。我可以采取一些措施来修复格式：我可以删除<p>代码，而是使用<br />将文字设置为段落样式。

但是，我问这个问题是因为我想了解

为什么<body>部分不包含<p>间距？ <p>间距“属于哪个部分，如果有的话？
遵循<p>标记的意图或一般的HTML标记，是否有一种“正确”的方法来解决此问题以标记我的段落并获取格式我想要（部分之间没有空格）。

要说清楚，我期待看到这样的事情：

enter image description here

......或者这个：

enter image description here

谢谢！

Answer 1

1em标记之前和之后，许多主要浏览器的默认边距为p。以下是Chrome开发者工具中的屏幕截图，其中显示了应用于所有p标记的默认用户代理样式表，直到被覆盖为止。

enter image description here

查看这个没有对段落标记进行任何更改的小提琴

EXAMPLE 1

然后将其与下面这个进行比较。请注意，我添加了一些margin:0;的CSS来删除用户代理样式表适用的默认边距。

EXAMPLE 2

p {
     margin:0;
}

Answer 2

这些空格的原因是浏览器有一个用户代理样式表，可以自动为正确的空格段落和某些其他文本元素添加边距。你可以添加

p {
    margin: 0;
}

到那些

标签，它将覆盖用户代理样式表

Answer 3

您正在看到折叠边距的影响。

p代码的上/下边距会以.content的边距折叠（在这种情况下为0），然后使用<header>和{{1}的边距折叠}（也是0）。

请注意，<footer>元素默认具有顶部和底部边距（浏览器样式表）。

要获得您期望的效果，可以通过将p添加到.content的CSS规则来触发overflow: auto上的块格式设置上下文。

通过这样做，.content元素的顶部/底部边距将被约束在p块的边缘内。

如果.content沿顶部/底部边缘有边框或填充，则段落边距不会折叠，因为边距必须彼此相邻才能折叠。

请参阅演示：http://jsfiddle.net/audetwebdesign/wXv9t/

附加说明

背景颜色延伸到内容，填充和边框，但不是边距。在这种情况下，当.content边距与p块一起折叠时，顶部/底部.content的顶部/底部边缘与p的顶部/底部边缘重合因此.content的背景颜色与段落的顶部/底部边缘重合。使用.content，overflow: auto边距包含在p的内容框中，因此背景颜色可以通过.content的边距看到，因此从这个意义上说，空间被“回收”。

参考文献

折叠边距：http://www.w3.org/TR/CSS2/box.html#collapsing-margins

块格式上下文：http://www.w3.org/TR/CSS21/visuren.html#block-formatting

段落标记在节之间添加空白空间

3 个答案: