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于此<h2>.一点摆弄告诉我你想要它:

line-height: 10px;

您可能需要使用px你font-size得到的东西在不同的浏览器的一致性.