行の高さがブロックに影響しているように見えることに気付きました。これまでこの不穏な影響に気づいたことがないのは、私にとって奇妙です。
問題は、ブロックにテキストがまったく含まれていない場合でも、ブロックに影響することです。
問題を示すために JSFiddleを作成しました。line-height を 0 に設定すると、灰色の領域がコンテナー内の画像の領域を超えなくなります。
なぜこれが起こっているのですか、それを防ぐためのきれいな方法はありますか?
質問する
1977 次
1 に答える
10
line-height「'line-height' は要素内の行ボックスの最小の高さを指定するため、値はテキストがない場合でもレンダリングに影響します。最小の高さは、ベースラインより上の最小の高さと、その下の最小の深さで構成されます。これは、各行ボックスが、要素のフォントと行の高さのプロパティを持つ幅ゼロのインライン ボックスで始まるのとまったく同じです。」( CSS 2.1 程度line-height。)
しかし、それが本当の原因ではありません。画像はデフォルトでインラインでレンダリングされます。つまり、テキストのベースライン上にある大きな (または小さな) 文字として機能します。細かいところはややこしいのですが、line-heightフォントサイズよりもかなり小さく設定することで、ベースライン同士を近づけてスペースをなくしています。
邪魔な効果を取り除く別の方法は、要素に設定display: blockすることです。imgその後、要素は別の方法でフォーマットされます。
さらに別の方法は、要素を設定vertical-align: bottomすることです。img
于 2012-08-26T19:25:57.987 に答える