最近、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ウェブサイトのホームページを作成します
目次ファイル()文法パラメータ例ブロブ()文法パラメータ財産方法例要約するファイル() File()...
皆さんおはようございます。しばらく記事を更新していませんでした。実は、私は流行中に1か月以上家にいて...
Linux に触れたばかりの方には、この内容が役に立つかもしれません。Linux にしばらく触れてい...
私たちが作成する Web ページでは、より多くの人々に訪問してもらいたい場合、検索エンジンを使用して...
序文Deepin のユーザー インターフェイスは、使用時に非常に見栄えがします。インターフェイス効果...
docker リポジトリ自体は非常に遅いですが、中国の Alibaba Cloud ミラー リポジト...
<br />記事と同様に、Web ページにも明確な段落と重要度の異なるタイトルが必要です...
Windows 7 で MySQL 5.7.17 をインストールする方法についてのグラフィック チ...
私は最近、最も安い Tencent クラウド サーバーを購入しました。これは主に、Web テクノロジ...
この記事では、MySQL のデータベース テーブルの容量を確認するためのコマンド ステートメントを紹...
目次序文1. 取引の基本原則の簡単な分析原子性:持続性分離:一貫性: 2. 分離レベルの基本原理の分...
Linux インストール MySQL ノート1. MySQL データベース サーバーをインストールす...
仮想マシンは非常に便利なテストソフトウェアです。ハードウェアに損傷を与えることなく、さまざまなテスト...
目次1. シナリオの説明: 2. 事例のデモンストレーション: 2.1. MySQLの障害発生前にデ...
目次1. ダウンロードする前に理解しておくべき概念2. 必要なバージョンを選択する3. MySQLサ...