空のインラインブロック div が非表示のコンテナー内で高くなるのはなぜですか?
Nov 02, 2024 pm 05:01 PM
inline-block を使用すると、不思議なことに、非表示のコンテナー内の空の inline div 要素の高さが増加します。 display:block の動作とは対照的に、これはなぜ発生しますか?
Display:inline-block は要素に特定の書式設定を与えます:
- インラインレベルの書式設定: 要素は配置されます
- 行の高さの計算: 行の高さは、インライン要素では異なる方法で計算されます。インラインブロック要素の場合、マージンボックスの高さになります。通常のインライン要素の場合、これは 'line-height' プロパティです。
inline-block 要素が空の場合、フォントやテキストのコンテンツがなくても、基本的な行の高さが想定されます。この結果、空の状態にも関わらず、要素の高さは小さくても顕著になります。
この高さの問題を回避する回避策は、font-size:0 のラッパーを使用して、行の高さの計算を排除することです。
.wrapper {
font-size: 0;
}
.wrapper div {
font-size: medium;
}ログイン後にコピー
更新: インライン ブロックの高さについて
当初の想定に反して、空のインライン ブロック要素の正確な高さは公式に文書化されていません。ただし、観察とテストによると、
- Inline-block は、継承された行の高さに基づいて最小の行スペースを予約しており、通常は <body> によって決定されます。 element.
- この行スペースは、インラインブロックが空であっても存続し、理論的には CSS 仕様に従って高さゼロとして扱われる必要があります。
以上が空のインラインブロック div が非表示のコンテナー内で高くなるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気の記事
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？
3週間前
By DDD
レポ：チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー：巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
2つのポイント博物館：すべての展示とそれらを見つける場所
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
人気の記事
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？
3週間前
By DDD
レポ：チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー：巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
2つのポイント博物館：すべての展示とそれらを見つける場所
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
ホットな記事タグ
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
Gmailメールのログイン入り口はどこですか？
7126
9
7126
9
Java チュートリアル
1534
14
1534
14
Laravel チュートリアル
1256
25
1256
25
PHP チュートリアル
1205
29
1205
29
CakePHP チュートリアル
1153
46
1153
46
Smart Forms Frameworkを使用してJavaScript連絡フォームを作成する
Mar 07, 2025 am 11:33 AM
Smart Forms Frameworkを使用してJavaScript連絡フォームを作成する
5つの最高のPHPフォームビルダー（および3つの無料スクリプト）を比較する
Mar 04, 2025 am 10:22 AM
5つの最高のPHPフォームビルダー（および3つの無料スクリプト）を比較する
node.jsとexpressのMulterを使用してファイルアップロードします
Mar 02, 2025 am 09:15 AM
node.jsとexpressのMulterを使用してファイルアップロードします
