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

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

html css

Html 段落标记在节之间添加空白,html,css,Html,Css,当我用标记开始或结束HTML文档的某个部分时，它会在前面/后面的部分之间添加一个“无人认领”的空格例如： <!DOCTYPE html> <html> <style> header {background-color: gray} div.content {background-color: lightblue} footer {background-color:gray} </style> <head> <meta cha

当我用

标记开始或结束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>


标题{背景色：灰色}
div.content{背景色：浅蓝色}
页脚{背景色：灰色}
这是标题。
这是标题。
这是第1段
这是第2段
这是页脚

结果:

请注意由于

标记而在

上方和下方插入的空格。我可以做一些事情来修复格式：我可以删除

标记，而使用

将文本样式设置为段落

然而，我问这个问题是因为我想理解

为什么

部分不包括

间距？如果有的话，

间距“属于”哪个部分

按照

标记或HTML标记的意图，是否有一种“正确”的方法来解决这种行为，以标记我的段落并获得我想要的格式（节之间没有空格）

说得清楚一点，我希望看到这样的情况：

。。。或者这个：

谢谢

之所以使用这些空格，是因为浏览器有一个用户代理样式表，可以自动为段落和某些其他文本元素添加空格。你可以加上

p {
    margin: 0;
}

对于那些标记，它将覆盖用户代理样式表许多主要浏览器的默认边距是

1em

在

标记之前和之后。下面是Chrome Developer Tools中的屏幕截图，显示了应用于所有

标记的默认用户代理样式表，直到被覆盖为止

看看这把小提琴，它根本没有改变段落标记

然后将其与下面的这个进行比较。注意，我添加了一些

margin:0的CSS

删除用户代理样式表应用的默认边距

您正在看到边距崩溃的影响

标记上的上/下页边距随

.content

的页边距一起折叠（本例中为0），然后随

和

的页边距一起折叠（也为0）

请注意，

元素在默认情况下具有上下边距（浏览器样式表）

要获得预期效果，可以通过向

.content

的CSS规则中添加

溢出：auto

来触发

.content

上的块格式上下文

通过这样做，

元素的上/下边距将被约束在

.content

块的边缘内

如果

.content

沿上/下边缘有边框或填充，则段落边距不会折叠，因为边距必须彼此相邻才能折叠

请参见演示：

附加说明

背景色延伸到内容、填充和边框，但不延伸到边距。在这种情况下，当

页边距与

.content

块一起折叠时，上/下

的上/下边缘与

.content

的上/下边缘重合，因此

.content

的背景色与段落的上/下边缘重合。使用

overflow:auto

，

页边距包含在

.content

的内容框中，因此背景色通过

的页边距可见，因此从这个意义上说，空间是“回收的”

参考资料

折叠边距：

块格式上下文：

以确保我理解。。。似乎有一个操作顺序是造成这种效果的原因。确定了

页眉

div.content

和

页脚

的位置，然后段落边距上发生折叠。如果没有

overflow:auto

，空间将不会被

div.content

回收。我说的对吗？你基本上是对的，请看我上面的扩展解释。重新阅读你的解释，听起来我所期望的是

填充的行为。显然，margin
属性意味着在元素与其相邻元素之间放置一个中性空间；背景色不扩展。如果要添加成为段落“一部分”的空格，则应调整填充（或者，按照您的建议，将段落放入容器中）。
p {
     margin:0;
}