H1元素文本顶部定位方法及高度异常原因咨询

1. 实现H1文本贴合容器顶部的CSS属性 #

要让H1内的文本紧贴容器顶部，最直接有效的核心属性是 line-height。

默认情况下，浏览器会给H1这类标题元素设置大于字体大小的line-height（比如常见的1.2倍），这会让文本在垂直方向上产生额外间距。你只需要把line-height的值设置为和font-size一致，或者直接设为1（或1em），就能让文本完全贴合容器顶部：

h1 {
  margin: 0;
  padding: 0;
  font-size: 24px;
  line-height: 24px; /* 或者更简洁的 line-height: 1; */
}

如果是在弹性布局场景下，也可以用display: flex配合align-items: flex-start来实现，但line-height是适配绝大多数场景的通用方案。

2. 为何margin和padding设为0后，H1高度仍大于文本本身？ #

这主要由两个关键原因导致：

• 字体自身的内置留白：字体文件本身会包含上升部（比如字母"b"的顶部延伸区域）和下降部（比如字母"g"的底部延伸区域）的留白空间，浏览器渲染文字时会保留这些空间，哪怕你去掉了padding和margin，这些内置留白也会让元素高度略大于文本的实际显示高度。
• 浏览器默认的line-height值：浏览器的用户代理样式（UA样式）会给H1设置默认的line-height（通常大于1），这个值会直接撑开元素的高度。即使你设置了margin: 0和padding: 0，如果没有显式覆盖line-height，它仍然会让H1的高度大于文本本身的字体大小。

要让H1高度尽可能贴近文本高度，除了设置margin: 0和padding: 0，还需要把line-height设为1。如果追求极致贴合，还可以尝试ascent-override等字体属性（不过兼容性稍有限），大部分场景下line-height: 1就足够解决问题。

内容的提问来源于stack exchange，提问作者Randeth