CSS:字体上边距

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 reset 来去除浏览器特定的样式，但在上面的代码中忽略了它。

我创建了一个 live example

问题是背景图片和 h2 标签的文本顶部没有对齐 - h2 标签的顶部有一个小的“边距”。这个边距似乎随着字体大小而变化。当我使用 Google Chromes inspector 时，它告诉我 h2 和 div 标签的 margin 和 padding 都是 0px。由于浏览器以不同的方式呈现字体，我不想乱用负边距以防它破坏布局。有没有办法“安全地”摆脱这个 margin ？完全清楚，我想要实现的是 this .

Answer 1

我认为你的问题是 line-height 在 <h2> 上.一些摆弄告诉我你希望它是:

line-height: 10px;

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