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

推薦する

HTMLタグのtarget属性の使用法

1: <a> タグを使用してページにリンクする場合、target 属性の役割は誰もが知っ...

Ubuntu の MySQL のパラメータ ファイル my.cnf の詳細な分析

序文MySQL に関する私の理解に基づくと、パフォーマンスの最適化作業やマスター スレーブ レプリケ...

CSS でインラインブロック要素間のギャップを削除するいくつかの方法の詳細な説明

最近、モバイルページを制作する際には、レイアウトにインラインブロック要素がよく使われますが、インライ...

MySQL をインストールするときに初期パスワードを忘れた場合のシンプルで効果的な解決策

MySQL をインストールすると初期パスワードが与えられますが、この初期パスワードは大文字と小文字の...

Zookeeper&Kafka クラスターを構築するための Docker の実装

最近Kafka勉強しています。クラスタの状態をテストする準備をしていたときに、仮想マシンを 3 つ開...

CSSは5つの一般的な2D変換を実装します

CSS の 2D 変換を使用すると、移動、回転、拡大縮小、変形などの基本的な変換操作を 2 次元空間...

DOSBox を起動後に自動的にコマンドを実行する方法

DOSBox を使用すると、Windows で DOS をシミュレートし、楽しい作業を行うことができ...

MySql インポート CSV ファイルまたはタブ区切りファイル

別のライブラリから別のライブラリにデータをインポートする必要がある場合があり、このデータは CSV ...

マテリアルデザインで水滴アニメーションボタンを実現するための純粋なCSS

序文こういう特殊効果ってよく見かけますよね。すごくかっこいいですよね。 これは、Google Mat...

CentOS7.8 に mysql 8.0.20 をインストールするための詳細なチュートリアル

1. MySQLソフトウェアをインストールするMySQL 公式 Yum リポジトリ、MySQL バー...

vue $setは配列コレクションオブジェクトへの値の割り当てを実装します

Vue $set 配列コレクションオブジェクトの割り当てVue カスタム配列オブジェクト コレクショ...

mysql5.7 の新しい json フィールド タイプの使用例の分析

この記事では、MySQL 5.7 で追加された json フィールド タイプの使用方法を例を使って説...

IDEA で Linux コマンドを使用する方法

Windows システムと比較して、Linux システムは多数の豊富なコマンドライン ツールを提供し...

Iframe の内外のページで JS がどのように動作するかの概要

目次iframeの外側のiframeのコンテンツを取得する方法1方法2 iframe 内の ifra...