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>

标签： htmlcss

Answer 1

正如您在检查器中看到的，您看到的“边距”（空白）实际上是contenth1 的 box-model 的一部分。所以这不是因为marginor padding，而是因为它font本身。尝试使用line-height, font-size,... 等进行调整以查看是否获得所需的结果。