前の これは古くからある古典的な質問です。以前読者から質問があったので、ここでお答えします。 簡単な例から始めましょう 簡単な例を見てみましょう。 <スタイル> .slide1 div { マージン:10px 0; } </スタイル> <div class="slide1"> <h3>マージン相殺タイプ 1: 兄弟要素</h3> <p>テキストの上下の間隔は 10 ピクセル</p> <p>テキストの上下の間隔は 10 ピクセル</p> </div> この例の 2 つの 分類 マージン崩壊には、基本的に 3 つのケースがあります。
急いで暗記しないでください。まず、前の記事の例は最初のケースです。マージンの崩壊は、隣接する 2 つの要素間で発生します。 2番目と3番目のケースは次のとおりです。 <スタイル> 。父親 { 背景色: 緑; } 。子供 { 上マージン: 50px; 背景色: 赤; 高さ: 300px; } .スライド3 { マージン: 10px 0; } </スタイル> <h3>2 番目のマージンの縮小: 親要素と最初の子要素</h3> <div class="slide2 父"> <!-- 親要素は緑色です --> <div class="slide2 子"> <!-- 子要素は赤です --> </div> </div> <h3>第 3 マージンの縮小: 空のブロックレベル要素</h3> <div class="slide3"></div> それらの画像も以下に示します。 ケース2: 子要素の余白が親要素の外側に「転送」される ケース3: 要素の上下の余白がなくなる さて、これらの状況の共通点を見てみましょう(ボックスモデルを描くことをお勧めしますが、描くのが面倒なので-_-)、マージンの崩壊の共通の原因は、マージンが何の障害もなく直接接触していることです。 直接接触をどのように理解すればよいでしょうか?とても簡単です:
様々なケースでの折り畳みの結果 折り畳み後の余白を計算する方法は簡単に確認できます。
余白が崩れるのを防ぐ方法 前述のように、マージンの崩壊の原因は、マージンが直接接触していることです。したがって、崩壊を防ぐ方法は、この直接接触をブロックすることです。方法の組み合わせは次のとおりです。
まとめ 上記で説明したのは基本的な状況であることを付け加えておきます。基本的な状況では、複数の隣接する要素間や、子孫要素の複数層のネストなどの組み合わせも作成できます。基本原理を理解すれば、小さなデモを作成して検証する限り、他の状況も簡単に理解できるようになります。それから、慣例があります。内容に間違いがあったら指摘してください(読んでいて不快に感じたり、文句を言いたくなったりしても全く問題ありません)。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 元のアドレス: https://segmentfault.com/a/1190000016842993 |
>>: Nofollowはコメントやメッセージ内のリンクを本当に機能させる
以前、写真が与えられ、その写真スタイルに基づいてフォームを作成するという課題に遭遇しました。しかし、...
最近、nginx をリバース プロキシとして使用し、docker で nginx を実行するシステム...
序文クエリ ステートメントを使用する場合、多くの場合、データの最初の数行または中間行を返す必要があり...
HTML Police がコードを調べて意味のないタグをすべて見つけ出すので、注意を払う必要がありま...
導入MySQL はレプリケーションを通じてストレージ システムの高可用性を実現します。現在、MySQ...
序文最近、オンラインでデータが誤って操作されました。データベースが直接変更されたため、それを回復する...
1. どのように構築しますか? es5 でクラスを構築する一般的な方法を確認しましょう。まず、es5...
<br />質問:特定のファイルにジャンプするには、HTML でどのように記述すればよい...
成果を達成する実装のアイデアフィルターのコントラストとぼかしを利用して溶ける効果を実現します。親要素...
目次序文フィルターとは何かフィルターの使い方グローバルフィルターローカルフィルターフィルターは直列に...
この記事では、USB ブート ディスクの作成とシステムのインストールについて説明します。システム構成...
nginx 設定ファイルは主に 4 つの部分に分かれています。 main{#(グローバル設定) ht...
前回の記事では、Vue で画像の切り抜きや拡大・縮小、回転を実現する方法を紹介しました。今回は、アイ...
1. Webデザイナーウォール 2. Veerleのブログ 3. チュートリアル9 4. UXブース...
1. インストール前の準備1. 公式ウェブサイトからUbuntu 20.04のイメージファイルを直接...