从H（标题）标签上删除顶部/底部填充

Question

我已经看到很多帖子试图解决这个问题，但是我的填充仍然存在。如何（如果可能）如何将顶部/底部填充/边距删除到H1，H2，H3标签等上。

h1 {
  outline: 1px solid red;
  padding: 0px;
  margin: 0px;
}

<h1>hello world</h1>

Answer 1

将display属性更改为inline-block，因为默认情况下，它使用的是“ display：block”，它横跨屏幕的整个宽度。

h1 {
  outline: 1px solid red;
  padding: 0px;
  margin: 0px;
  display:inline-block;
}

<h1>hello world</h1>

Answer 2

如果您要谈论文本上方和下方的空格，则需要调整line-height。只需注意一下，因为这是特定于字体的，因此对于另一个字体系列，您可能需要使用不同的line-height值

h1,h2,h3 {
  outline: 1px solid red;
  padding: 0px;
  margin: 0px;
  line-height: 0.7;
}

<h1>hello world</h1>
<br>
<h2>hello world</h2>
<br>
<h3>hello world</h3>

Answer 3

您已经删除了顶部和底部的填充和边距。您在示例中字母上方和下方看到的空间是由于行高而引起的（默认设置取决于您的浏览器）。您可以通过添加不同的设置来减少这种情况，但请始终记住，某些字母需要在上方和下方留出空间，这也取决于所使用的字体，而这些字体可能会因所需的垂直空间而异：

h1 {
  border: 1px solid green;
  padding: 0px;
  margin: 0px;
  line-height: 100%;
}

<h1>hello - mind letters like these: jQÜØgpÄy</h1>