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

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ウェブサイトのホームページを作成します

推薦する

Javascript ファイルと Blob の詳細な説明

目次ファイル()文法パラメータ例ブロブ()文法パラメータ財産方法例要約するファイル() File()...

HTTPSの最も優れた説明

皆さんおはようございます。しばらく記事を更新していませんでした。実は、私は流行中に1か月以上家にいて...

TomcatをダウンロードしてLinuxにインストールする詳細な手順

Linux に触れたばかりの方には、この内容が役に立つかもしれません。Linux にしばらく触れてい...

HTML における <meta> タグの使用に関する詳細な説明

私たちが作成する Web ページでは、より多くの人々に訪問してもらいたい場合、検索エンジンを使用して...

VMware15 の Deepin インストール詳細チュートリアル (画像とテキスト)

序文Deepin のユーザー インターフェイスは、使用時に非常に見栄えがします。インターフェイス効果...

Alibaba Cloud イメージリポジトリの Docker 構成変更の実装

docker リポジトリ自体は非常に遅いですが、中国の Alibaba Cloud ミラー リポジト...

XHTML 入門チュートリアル: よく使われる XHTML タグ

<br />記事と同様に、Web ページにも明確な段落と重要度の異なるタイトルが必要です...

MySQL 5.7.17 のインストールと設定方法のグラフィックチュートリアル (Win7 の場合)

Windows 7 で MySQL 5.7.17 をインストールする方法についてのグラフィック チ...

NodeサイトのForever+nginx導入方法例

私は最近、最も安い Tencent クラウド サーバーを購入しました。これは主に、Web テクノロジ...

MySQLデータベーステーブルの容量を確認する方法の例

この記事では、MySQL のデータベース テーブルの容量を確認するためのコマンド ステートメントを紹...

MySQL トランザクションと分離レベルの基本原理の簡単な分析

目次序文1. 取引の基本原則の簡単な分析原子性:持続性分離:一貫性: 2. 分離レベルの基本原理の分...

Linux インストール MySQL5.6.24 使用手順

Linux インストール MySQL ノート1. MySQL データベース サーバーをインストールす...

VMware Workstation 仮想マシンのインストール操作方法

仮想マシンは非常に便利なテストソフトウェアです。ハードウェアに損傷を与えることなく、さまざまなテスト...

mysql5.7.33 で誤って ibdata ファイルを削除した後にデータを回復する方法

目次1. シナリオの説明: 2. 事例のデモンストレーション: 2.1. MySQLの障害発生前にデ...

WindowsでのMySQLインストールチュートリアルの詳細な紹介

目次1. ダウンロードする前に理解しておくべき概念2. 必要なバージョンを選択する3. MySQLサ...