2

画像の上部をテキストに合わせたいのに、実際には文字が行の高さよりわずかに下にあるという非常に厄介な問題があります。

以下の問題を説明するために、古典的な映画で簡単なサンプルを作成しました。

HTML:

<img src="http://cf2.imgobject.com/t/p/w92/wcI3VMHw2TqtPVIkS4wpmxBJzWB.jpg" />
<p>Big</p>
<p>Admin</p>

CSS:

p, h4{
    font-size:1em;
    line-height:1em;
    vertical-align:top;
    margin:0;
    padding:0;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}

img{
    float:left;
    width:46px;
}

出力 (Chrome):

ご覧のとおり、行の高さは画像の上部に揃えられていますが、テキスト自体はそうではありません。すべての垂直方向の配置オプションを修正せずに試しました。

両方が同じサイズに設定されている場合でも、行の高さがフォント サイズよりも大きいのはなぜですか? これはどのように修正できますか？

4

1 に答える 1

10

これは、CSS よりもタイポグラフィ全般に関係しています。フォントのデザインを考慮した縦方向のガイドが多数あります。キャップの高さを画像の上部と一致させたいと思います。

ここであなたの例をjsfiddleに追加しました：http://jsfiddle.net/ahXpH/1/そしてそれを複製しました。拡大すると、"Big" の "i" は実際には B よりも高くなっていますが、"g" は段落自体の範囲を超えて伸びていることがわかります。Chrome で要素を調べると、line-heightとがfont-size一致することがわかります。

これを回避するには、 を調整しmargin-topて視覚的に並べる必要があります。margin-top: -8px;私のjsfiddleバージョンでは、これはたまたまfont-family: "Trebuchet MS"and font-size:48px. ( http://jsfiddle.net/ahXpH/4/ ) ただし、"Trebuchet MS" を削除して、Arial のフォールバック フロントを使用すると、それが整列しなくなり、画像の 1 ピクセル上にあることがわかります。

最終的に、これに対する純粋な CSS ソリューションがあるかどうかはわかりません。値のハードコーディングは 1 つのフォントでのみ機能し、ブラウザごとに異なる場合もあります。

于 2012-09-13T20:42:59.160 に答える