如何根据自己的高度定位 H1

Question

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

Answer 1

嗯，文本顶部与其容器之间应该有 space。它被称为行高。很多内容都内置于字体本身。

它同时存在顶部和底部以说明排版 升序（小写“l”或“f”的顶部和 降序（小写“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;
}