BinaryDevelop
  1. ホーム
  2. Web制作
  3. CSS

[CSSチュートリアル】CSSのラインハイトとハイトを詳しく解説

2022-02-03 06:51:16

最近、CSSのインターフェースをやっているとline-heightとheight属性に出会うことが多いのですが、あまり理解できていなかったので、今日はちょっとネットで調べてみました。 https://blog.csdn.net/a2013126370/article/details/82786681 このブロガーは非常に良い記事を書きました。少なくとも私のline-heightとheightの理解をより深いものにしてくれました、それは学ぶ価値があります。

I. いくつかの基本的な概念

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

2. 行間とは、最上行の最下行から次の行の最上行までの距離です。

私の個人的な理解では、次のような結論になります。

1. divのheightプロパティが設定されていない場合、divの高さはline-heightのサイズに基づき、font-sizeの影響を受けません。

2. heightは、imgの高さ、divの高さなど、要素の高さを設定するために使用します。line-height属性は行間（行の高さ）を設定するために使用され、同じ概念ではありません。

II. コード例 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>sdds</title>
        <style>
            html,body,div{
                margin: 0;
                padding: 0;
                border: 0;
            }
            .bg0{
                width: 200px;
                height: 45px;
                line-height: 100px;
                background-color: red;
                font-size: 10px;
                word-wrap:break-word;
            }
            .bg1{
                width: 200px;
                height: 10px;
                background-color: green;
            }
            .bg2{
                width: 200px;
                height: 45px;
                background-color: yellow;
            }
            .bg3{
                width: 200px;
                height: 55px;
                background-color: blue;
            }
        </style>
    </head>

<body>
    <div class="bg0">Shanghai University (SHU) is a 211 university</div>
    <div class="bg1"></div>
    <div class="bg2"></div>
    <div class="bg3"></div>
</body>
</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については、スクリプトハウスの他の関連記事にもご注目ください!

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します