【发布时间】：2011-09-11 06:27:01
【问题描述】：
我知道这个问题的标题很愚蠢，但我想不出更好的办法。我已经在这个主题上搜索了几个小时，但要么我搜索出了错误，要么我错过了一些 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 标记的顶部有一个小的“边距”。这个边距似乎随着字体大小而变化。当我使用谷歌浏览器检查器时，它告诉我 h2 和 div 标签的边距和填充都是 0px。由于浏览器呈现字体的方式不同，我不想乱用负边距，以防它破坏布局。有没有办法“安全地”摆脱这个利润？完全清楚，我想要实现的是this。
【问题讨论】：
-
+1，用于带有代码、测试用例和目标图像的问得很好的问题。很少见。
-
你试过修改背景图片的顶部位置吗？
-
这听起来是个好主意——我也会试试的！
-
您能否将您的示例和目标图像重新发布到某个永久位置？链接现在已断开。
-
@LinusR 更新了损坏的链接。