html - 为什么文本在没有填充或边距的情况下似乎有填充？

Question

我有一个 h1 没有边距也没有填充，但在 h1 中的内容上方和下方仍然有一些空白。

是字体的问题还是其他原因？我尝试将 margin-block-start 和 margin-block-end 设置为 0 但没有任何反应。

*, *::after, *::before {
	 margin: 0;
	 padding: 0;
	 box-sizing: inherit;
}

 html {
	 font-size: 10px;
	 box-sizing: border-box;
	 overflow-x: hidden;
}

h1 {
	 font-size: 3rem;
}

.accueil .container h1 {
	 font-family: 'Roboto', sans-serif;
	 font-weight: bold;
	 font-size: 4.5rem;
	 text-transform: uppercase;
}

.accueil .container h3 {
	 font-size: 2rem;
	 letter-spacing: 1px;
	 margin-bottom: 2rem;
}

<div class='accueil'>
  <div class='container'>
    <h1>SOMETHING</h1>
    <h3>something else</h3>
  </div>
</div>

Answer 1

正如您在检查器中看到的，您看到的“边距”(空白)实际上是 h1 的框模型的 content 部分。所以这不是因为 margin 或 padding，而是因为 font 本身。尝试使用 line-height、font-size 等进行调整，看看是否能获得所需的结果。