3

ブロック要素の行の高さをゼロに設定すると、その要素内の各行ボックスは、そのコンテンツの行の高さにのみ基づいて配置されると思います。ただし、これらのインライン要素で非常に小さなフォントを使用しようとすると、行のコンテンツに必要なベースラインよりも低いベースラインに合わせているように見えます。CSS 仕様に関する私の理解は、すべてのブラウザーがレンダリングしているものとは一致しません。私は何が間違っていますか？

簡単なデモのコードは次のようになります (これもフィドルにあります)。

body {
    font-size:60px;
}
div {
    height:3em;
    width:8em;
    border:1px solid black;
    line-height:0; /* minimum line height for contained elements */
}
span {
    line-height:normal; /* don't inherit from containing block */
    background-color: #cff; /* so we can see positioning */
}
<div><span>Big text works</span></div>
<div><span style="font-size:.5em">Half text size works fine too</span></div>
<div><span style="font-size:.2em">Very small text doesn't align with the top of the containing box. Why does this happen?</span></div>

CSS仕様によると：

コンテンツがインライン レベルの要素で構成されるブロック コンテナー要素では、'line-height' は要素内の行ボックスの最小の高さを指定します。

置換されていないインライン要素では、'line-height' は行ボックスの高さの計算に使用される高さを指定します。

単純な例として、小さなテキストの位置をハックしてそれを含むブロックの上部に配置する方法がたくさんあることは知っていますが、テキストがそのまま並んでいます。

4

2 に答える 2

1

line-height私が見た動作は、私が想定していた最小値とは何の関係もないことがわかりました。スパンにvertical-align:baseline. スパンが親のベースラインに依存しないvertical-alignなどの違いを持っ​​ている場合、それが含まれていると予想される div の上部に移動します。bottom

ストラット (すべての行ブロックの先頭にあり、親要素のfont-sizeandを持つ架空の文字)line-height) は、線の上端と下端を指定するだけでなく、独自のベースラインも持っています。(CSS3 では、実際には多数のベースラインがありますが、今のところは「アルファベット」のベースラインに焦点を当てることができます。) ストラットのベースラインは、親要素のフォントでレンダリングされた文字が上と下の中間になるように配置されます。ストラット。line-height が 0 であるこの特定のケースでは、ストラットの上部と下部は同じラインですが、実際には下部エッジの下にベースラインがあります。ストラットのベースラインは、下端と同様に、ラインの最小値を定義します。つまり、下に移動することはできますが、上に移動することはできません。これは、スパン内ではるかに小さいフォントをレンダリングするときに、div のフォントを div の上端に中央揃えするベースラインを使用していることを意味します。

于 2013-02-19T18:29:43.047 に答える