CSS：字体上方margin

Question

我知道这个问题的标题很蠢，但我想不出更好的了。我在这个主题上搜索了几个小时，但要么是我搜索错了些什么，要么就是我错过了一些CSS基础知识。

我有一个容器div，其中包含一个40x40像素的背景图片，放置在左上角。我想将h2标签中的文本顶部与该背景图片的顶部对齐，我已经尝试了以下方法。

HTML:

<div id="container">
  <h2 id="title">Lorem</h2>
</div>

CSS:

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}

#container {
    background: url('test-icon.png') top left no-repeat;
    margin: 200px auto; /* To center the container on the page*/
    min-height: 50px;
    padding-left: 50px; /* To prevent the text from "colliding with the background-image"*/
    width: 300px;
}

#title {
    font-family: "Arial Black", Arial, Helvetica, sans-serif;
    font-size: 1.3em;
    text-transform: uppercase;
}

我使用了Eric Meyers的CSS重置来消除浏览器特定的样式，但在上面的代码中留下了它。

我创建了一个实时示例

问题是background-image和h2标签中文本顶部不对齐 - h2标签顶部有小的“边距”。此边距似乎随着字体大小变化而变化。当我使用Google Chrome的检查器时，它告诉我h2和div标签的margin和padding都是0px。由于浏览器以不同的方式呈现字体，我不想尝试使用负边距来解决这个问题，以防止破坏布局。有没有一种“安全”的方法来消除这个边距？为了完全清楚，我想要实现的是这个。

- Tomas Lieberkind

---

好问题！有代码、测试案例和目标图像，点个赞（+1）。这样的问题很少见，非常好。 - thirtydot

你尝试过修改背景图片的顶部位置吗？ - kinakuta

那听起来是个好主意 - 我也会尝试一下的！ - Tomas Lieberkind

你能否将你的示例和目标图像重新发布到某个永久的位置？链接现在已经失效了。 - LinusR

@LinusR 更新了失效的链接。 - Tomas Lieberkind

Answer 1

我认为你的问题在于<h2>标签上的line-height属性。稍微调整一下，我认为你希望它是：

line-height: 10px;

为了在各种浏览器上保持一致性，您可能需要使用px作为您的font-size。

- mu is too short

---

这正是我试图以更通用的方式实现的目标。当我阅读更多关于字体和行高的内容时，我认为这可能需要稍微调整一下才能完成。谢谢。 - Tomas Lieberkind

唯一失败的情况是当文本需要跨越>1行时，这就是我发现这个问题的原因。您可以使用position: relative; top: -0.3em;或任何需要的内容，而不是减少行高，但是这可能在浏览器之间不一致。 - LinusR

Answer 2

你尝试过使用line-height: 1;吗？

- simonfoust