为什么HTML / CSS在大p标签后会增加空间？

Question

我想要一个页面标题，用大字母说“网站名称”，然后大约20px，我需要一个<hr>标记。但是出于某种原因，它下面还有相当大的空间？

我如何删除它下方的空间？

＆＃13;

＆＃13;

.global_header p {
  font-size: 70px;
  cursor: pointer;
  text-align: center;
}

＆＃13;

<div class="global_header">
  <b><p>WebsiteName.com</p></b>
  <hr>
</div>
<br>

＆＃13;

＆＃13;

＆＃13;

Answer 1

只需添加margin-bottom: 0px;

即可

.global_header p {
    font-size: 70px;
    cursor: pointer;
    text-align: center;
    margin-bottom: 0px;
 }

Answer 2

大多数浏览器会将<p>的上边距和下边距设置为1em（以及其他元素，因此请小心）。

em等于当前字体大小。如果字体大小为16px，则为1em = 16px, 2em = 32px, etc.。 em允许你相对调整大小。这就是为什么你在<p>上获得如此大的边距，字体大小为70px，因此你的上/下边距也是70px。

如果你想放大或缩小文字和想要填充，边距等匹配（相对），那么em是一个不错的选择。有also rems。

解决此问题的一种方法是不对所有段落使用相对单位，并在以后需要时进行相应调整。在您的使用案例中，这将指定特定的保证金金额。

＆＃13;

＆＃13;

p {
  margin: 16px 0;
}
.global_header p {
  font-size: 70px;
  text-align: center;
  /* Set margin as needed. 
  margin-bottom: 5px;
  */
}

＆＃13;

<div class="global_header">
  <b><p>WebsiteName.com</p></b>
  <hr>
</div>
<br>

＆＃13;

＆＃13;

＆＃13;