何だよ、利益はどこへ行ったのか:利益が重なる現象

6635 ワード

マージン(margin)はcssプロパティで、要素の外部の4つの方向の空白領域を設定します.reset.cssがない場合に複数のブロック要素に余白を付けると、上下隣接要素間の余白が意外に減少する現象が発生します.この現象を境界重畳現象と呼ぶ.利益相殺は、利益合併とも呼ばれる.
ソリューションショートカット

エッジオーバーラップ(エッジ折りたたみ)

利益重複現象の典型的な例は以下の通りである.

1.兄弟要素間の上下の境界が重なる

上記のコードでは、sectionタグはそれぞれmargin: 20pxの属性をスケーリングし、上下左右に余白を付与している.

この場合、第1節のベースピッチと第2節のトップピッチが適切である場合、2節間の間隔は40 pxであるべきである.しかし、2つのセグメント間の間隔は20 pxである.

この場合の利益重複現象は、一貫した設計を作成するのに役立ちます.

2.親子間の利益が重なる

逆に、親要因の利益と子供要因の利益が統合される場合もある.親要素では、子要素に1つの余白を与えると、数値8の形状が表示されますが、その結果、余白兼用現象によりHの形状が生成されます. これは、最初のchildのmarging-top、最後のchildのmarging-bottomが適用されないためです.cssをチェックすると、親要素に余白が指定されていないが、子要素の余白値が親領域を超えていると判断できます. <hr/> <h2>마진 겹침 현상을 해결하는 법</h2> この現象を解決する方法はいろいろあります. <iframe class="embed"scrolling="no"src="https://codepen.io/yeodahui/embed/YzYeJoq?default-tab=html%2Cresult"allowfullscreen=""/> 1. 親要素にオーバーフローアトリビュートを適用 親要素<code>overflow: hidden</code>のプロパティが与えられた場合、top、bottom marginが適用されます.<pre><code class="language-css">.parent { overflow: hidden; }</code></pre>インターネットExplore互換性を考慮する必要がなければ、同様の原理で動作する<code>display: flow-root</code>属性を付与することができる.IEが終了した将来、これは役に立つかもしれません. 2. 親要素への表示:inline block この方法を使用する場合は、親要素と同じ要素を横に並べて表示できることに注意してください.<pre><code class="language-css">.parent { display: inline-block; }</code></pre>3. 親要素にborder値を適用 親要素にborder値を指定することで解決することもできます.(<code>border: none</code>は解決できません)<pre><code class="language-css">.parent { border: 1px solid black; }</code></pre>borderでなくても、親ラベルにpaddingを追加したり、自分の空間を占める要素を親、子、兄弟要素の間に挿入したりすることで解決できます.ただし、<code>box-sizing: border</code>プロパティを使用しない場合、borderまたはpaddingは親要素の幅を変更する可能性があります. 4. 要素間にtableタグを追加 もう1つの解決策には、このようなものもあります.<pre><code class="language-html"><div class="parent">  <table></table>  <div class="child"> child 1 </div> ... </div></code></pre>利益が重なる要因の間に空白の表ラベルを追加します.空のテーブルラベルはスペースを消費せず、レイアウトに影響しません. しかし、これによりコンテンツのない無意味なラベルが追加されるため、cleanコードを追求する人はewを使用します.眉をひそめるだけで、この原理を適用して仮想要素として表すと、寸法を損なうことなく解決できます.<pre><code class="language-css">.parent::before, .parent::after { content: ' '; display: table; }</code></pre>before、after仮想クラスセレクタとしてドキュメントの実際のテーブルに追加するのではなく、このような利益が重なる要素にテーブル仮想要素を追加すると、非常に幸せになります. <blockquote> 注意: <ul><li> <a href="https://velog.io/@ursr0706/%EB%A7%88%EC%A7%84margin" rel="nofollow">마진 병합 현상(Margin Collapsing)</a> </li> <li>ビニブ</li></ul> </blockquote> <hr/> <h2>맺으며</h2> ダメなとき「なによどうしてダメなの?」と思ったけど、上の簡単な方法で修正したら、「なに、どうしたの?」疑問が生じる.ブラウザはなぜ利益が重なるように設計されていますか?なぜ溢れ出す时に解决するの?これらの問題を記録して解決しようと努力してこそ、本当に鋭い開発者になることができる......明日はもっと水を潜って勉強します. 付加)<code>display: flow-root</code>および<code>overflow: ...</code>の属性が与えられた場合、解決される問題は、ブロックフォーマットコンテキスト(block format context)に関連することである.これは、親が新しいブロックフォーマットコンテキストを作成し、子供と利益の重複を回避することを意味します. <code>overflow: visible</code>以外の<code>overflow: hidden</code>、<code>clip</code>などの属性を持つブロック要素は、利益の重複を生じない新しいブロックフォーマットコンテキストを生成する. フォーマットブロックに関する情報は<a href="https://developer.mozilla.org/ko/docs/Web/Guide/CSS/Block_formatting_context" rel="nofollow">여기를 클릭</a>. 『p>深い部分ですが、知っていれば幸せ感があるという束営宗燦さん.小麦粉を練る.floatプロパティを使用する場合に特に役立つそうです. <blockquote> 連結利益については、以下の資料からより詳細な説明を確認できます.強くお勧めします! <a href="https://youtu.be/c19Mjg-ivxc" rel="nofollow">[ㅁ] 마진병합 margin collapsing | 코딩가나다 | 빔캠프</a> <a href="https://www.joshwcomeau.com/css/rules-of-margin-collapse/" rel="nofollow">The Rules of Margin Collapse (EN)</a> </blockquote>

Reference

この問題について(何だよ、利益はどこへ行ったのか:利益が重なる現象), 我々は、より多くの情報をここで見つけました https://velog.io/@devsaza/likealion006

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

思い出のゲームルームを作成

[tentorflow]H 5 Kerasモデルのロード