CSSのline-heightとheightの詳細な説明

最近、CSS インターフェースに取り組んでいるときに、line-height と height という 2 つの属性によく遭遇しました。これまで、これらの属性の意味をまったく理解していませんでした。今日、時間をかけてオンラインで調べたところ、ある程度理解できました。 https://blog.csdn.net/a2013126370/article/details/82786681 このブロガーは非常によく書いています。少なくとも、line-height と height についてより深く理解できました。学ぶ価値はあります。

1. 基本的な概念

1. 行の高さは、テキスト行のベースライン間の垂直距離を指します（行間隔とも呼ばれます）。

2. 行間隔は、前の行の下の行と次の行の上端の行の間の距離です。

私の個人的な理解からすると、次のような結論を導き出すことができます。

1. div の height 属性が設定されていない場合、div の高さは line-height のサイズに応じて変化し、font-size の影響を受けません。

2. 高さは、img の高さ、div の高さなど、要素の高さを設定するために使用されます。 line-height プロパティは行間隔 (行の高さ) を設定するために使用しますが、これら 2 つは同じ概念ではありません。

2. コード例

<!DOCTYPE html>
<html>
    <ヘッド>
        <メタ文字セット="utf-8">
        <title>sdds</title>
        <スタイル>
            html、本文、div{
                マージン: 0;
                パディング: 0;
                境界線: 0;
            }
            .bg0{
                幅: 200ピクセル;
                高さ: 45px;
                行の高さ: 100px;
                背景色: 赤;
                フォントサイズ: 10px;
                単語折り返し:単語区切り;
            }
            .bg1{
                幅: 200ピクセル;
                高さ: 10px;
                背景色: 緑;
            }
            .bg2{
                幅: 200ピクセル;
                高さ: 45px;
                背景色: 黄色;
            }
            .bg3{
                幅: 200ピクセル;
                高さ: 55px;
                背景色: 青;
            }
        </スタイル>
    </head>

<本文>
    <div class="bg0">上海大学（SHU）は211の大学です</div>
    <div class="bg1"></div>
    <div class="bg2"></div>
    <div class="bg3"></div>
</本文>
</html>

実行結果:

結論: 黄色の背景の div と青色の背景の div の高さの合計は、クラス名 bg0 の div に設定された line-height=100px であり、赤色の div の最初の部分に設定された height=45px は、line-height から fontsize を減算して 2 で割ることによって取得される、つまり (100-10)/2=45px であることがわかります。

上記はCSSのline-heightとheightの詳しい説明です。CSSのline-heightとheightについてさらに詳しく知りたい方は、123WORDPRESS.COMの他の関連記事もぜひご覧ください！

<<: AWSサーバーリソースを無料で使用する方法を教えます

>>: PSを使用して2分でxhtml+cssウェブサイトのホームページを作成します