web-dev-qa-db-ja.com

CSSプロパティの「line-height」でChromeで狭い行間を作成できないのはなぜですか?

15pxの行の高さで他の場所で定義した段落タグがあり、ページのさらに下に行の高さを約10pxにしたい別の段落タグがあります。おもしろいことに、10px以下にはできませんが、25px以上に設定すると、line-heightプロパティが機能しているように見えます。

ChromeブラウザのWeb開発者ツール(ChromeのバージョンのFirefoxのFirebug))を介して関連するCSS(すべて手作業でコーディング)をチェックしましたが、関連するものが見つかりませんでした。線の高さが特定の最小値を超えて縮小しないようにできますか?

28
Simon Suh

FirefoxとChromeの両方で気づきました。HTML5doctypeを設定した場合、インライン要素の最小の行の高さがあります。ブロック要素の場合、行の高さを好きなように設定できます。線が重なることさえあります。

HTML5 doctypeを設定しない場合、ブロック要素またはインライン要素の最小の行の高さはありません。

66
mhenry1384

私は同じ問題に遭遇し、うまく動作しました:

.element { display: block; line-height: 1.2; }
22
Nitish

これをIE 8-11、Firefox 38.0.1、およびChrome 43でテストした後、動作は同じです:インライン要素の最小の行の高さこの最小の高さは CSS仕様 に由来するようです:

コンテンツがインラインレベルの要素で構成されているブロックコンテナー要素では、「line-height」は要素内の行ボックスの最小の高さを指定します。最小の高さは、ベースラインの上の最小の高さとその下の最小の深さで構成されます。これは、各行ボックスが要素のフォントと行の高さプロパティを持つゼロ幅のインラインボックスで始まる場合とまったく同じです。その架空の箱を「支柱」と呼びます。

インライン要素のいくつかの利点を維持したい場合は、display: inline-blockを使用できます。 display: blockも使用できます。どちらの方法でも、テストしたすべてのブラウザーで行の高さを自由に変更できます。

さらに読むための2つの関連する質問:

スパンの行の高さが役に立たない理由

ブラウザは、テキストを含むこのブロックの最小の行の高さを持っているようです。なぜですか?

3
John Washam