如何在自己的高度上定位 H1

Question

我需要一些帮助来将我的文本定位在它自己的高度内。 我需要实现的是将文本附加到容器的顶部（如箭头所示）。哪个 css 属性用于执行此操作？为什么 H1 的高度比 hte 文本本身大？我确保应用边距和填充 0。

Answer 1

好吧，文本顶部和它的容器之间应该有空间。它被称为行高。很多内容都内置在字体本身中。

它同时存在 top 和 bottom 以说明排版 ascenders（小写“l”或“f”的顶部和 descenders（小写“ y" 或 "g") 超出字符的基线和 x 高度。

您可以通过调整 line-height

使用 CSS 移除该高度的 一些

h1 {
  line-height: 1;
}

甚至是负数

h1 {
  line-height: -0.5;
}

您的屏幕截图显示了我期望的理想行为，其中图标和文本相互对齐。也就是说，您可以使用负边距或绝对定位来移动文本（不管元素的实际大小）。

h1 {
 margin-top: -5px;
 /* moves the text up 5 px */
}

h1 {
 /* takes the h1 out of the normal flow */
 position: absolute;
 top: -5px;
}