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重置来摆脱浏览器特定的样式，但是在上面的代码中已经将其保留了。

我创建了live example

问题是h2标签的背景图像和文本顶部没有对齐 - h2标签顶部有一个小的“边距”。此边距似乎随字体大小而变化。当我使用Google Chromes检查器时，它告诉我h2和div标签的边距和填充都是0px。由于浏览器以不同的方式呈现字体，因此如果它打破了布局，我不会想要使用负边距。有没有办法“安全”摆脱这个边际？要完全清楚，我想要实现的是this。

Answer 1

我认为您的问题是<h2>上的line-height。一点摆弄告诉我你想要它：

line-height: 10px;

您可能需要px使用font-size才能在各种浏览器中始终如一地运作。

Answer 2

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

CSS：字体上边距

2 个答案: