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

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等进行调整，以查看是否获得所需的结果。

Answer 2

删除h1或h3之类的边距

  h1 {
        font-family: 'Roboto', sans-serif;
        font-weight: bold;
        font-size: 4.5rem;
        text-transform: uppercase;
        margin:0; /*Add This*/
    }

    h3 {
        font-size: 2rem;
        letter-spacing: 1px;
        margin-top:0;  /*Add This*/
        margin-bottom: 2rem;
    }