CSS：字体上边距

Question

我知道这个问题的标题很愚蠢，但我想不出更好的答案。我已经在这个主题上搜索了几个小时，但要么我搜索到了错误的东西，要么我错过了一些 CSS 基础知识。

我有一个容器 div，其左上角放置了 40x40px 背景图像。我想将 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 重置来摆脱浏览器特定的样式，但在上面的代码中忽略了这一点。

我创建了一个 实时示例

问题是背景图像和文本顶部来自h2 标签未对齐 - h2 标签顶部有一个小“边距”。这个边距似乎随着字体大小的变化而变化。当我使用 Google Chromes 检查器时，它告诉我 h2 和 div 标签的边距和填充都是 0px。由于浏览器渲染字体的方式不同，我不想乱用负边距，以免破坏布局。有没有办法“安全”地消除这个余量？完全清楚的是，我想要实现的是这个。

Answer 1

我认为你的问题是 line-height在

上。稍微摆弄一下就知道你希望它是这样的：

line-height: 10px;

你可能需要使用 px 作为你的 font-size 以使事情在各种浏览器中一致地工作。

Answer 2

您是否尝试过行高：1； ？