web-dev-qa-db-ja.com

CSS：フォントの上マージン

この質問のタイトルがばかげていることは知っていますが、これ以上のことは思いつきませんでした。私はこのトピックについて何時間も検索しましたが、何か間違ったものを検索するか、CSSの基本を見逃してしまいました。

左上隅に40x40pxの背景画像が配置されたコンテナdivがあります。 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;
}

私はEricMeyers CSSリセットを使用してブラウザー固有のスタイルを削除しましたが、上記のコードではこれを省略しています。

実例 を作成しました

問題は、h2タグの背景画像とテキストの上部が整列していないことです。h2タグの上部に小さな「マージン」があります。この余白はフォントサイズによって変わるようです。 Google Chromeインスペクターを使用すると、h2タグとdivタグのマージンとパディングがすべて0pxであることがわかります。ブラウザはフォントのレンダリングが異なるため、レイアウトが崩れた場合に備えて、負の余白をいじくり回す必要はありません。このマージンを「安全に」取り除く方法はありますか？完全に明確にするために、私が達成したいのは this です。

cssfontsmargin
14
Tomas Lieberkind

あなたの問題はline-heightの-​​ <h2> だと思います。少しいじくり回すと、次のようになりたいことがわかります。

line-height: 10px;

さまざまなブラウザで一貫して動作させるには、font-sizeにpxを使用する必要がある場合があります。

6
mu is too short

行の高さを試しましたか：1; ？

2
simonfoust