CSS マージンの折りたたみ_html/css_WEB-ITnose

マージントップの制御不能とは、マージンを使用する場合によく発生する問題で、内側の要素のマージンが外側のレイヤーに吸収されてしまい、正しく表示されなくなる問題です。 マージンの崩壊 と呼ばれるこの記事では、この問題に対処する方法を説明します。

状況

バナーを作成する場合、通常、画面の左上にロゴが必要になるため、その中に美しいロゴを詰め込むための div を用意します。

写真に示されているように、私たちのロゴも上部からある程度の距離を置く必要があります。論理的に言えば、オブジェクトが端からある程度の距離を置く必要がある場合は、ロゴを埋めるのに役立ちます。余白にあるため、次のような問題が発生します。

CodePen の Wcc723 (@Wcc723 ) によるペンの折りたたみマージン (ブログ用) を参照してください。

上記で発生した問題をよく見てください。内部要素のマージンは役割を果たしていません。ただし、外層に吸収されます。

制御不能マージントップ

この問題に慣れていない場合、この問題に遭遇したとき、次のように言うでしょう。 ！」という問題を解決するには、通常、さまざまな

恥は脇に置いて

の他の方法を使用するしかありませんが、原因を把握している限り、簡単に克服できます。

この問題は w3c で「マージンの縮小」として言及されており、私はこの部分を以下の点に要約しました:

1. 内側の層と外側の層は両方とも「ブロック」要素です。
2. 外側のブロック要素にはボーダー、パディング、オーバーフローがありません。
3. 浮動小数点と絶対値を除く、内層の最初のブロック要素 (空の要素はカウントされません)。

したがって、この問題を回避したい場合は、ブロック要素を使用しない、外側の層にパディングを追加する、内側の層にフロートを追加するなど、上記の問題を回避する必要があります。解決策はその一部です。

CodePen の Wcc723 (@Wcc723 ) による Pen Collapses margins (resolve for blog) を参照してください。

これは、学生との Q&A でよく遭遇するものでもあります。今回はこれを見つけてみましょう。機会を利用して記事を書いてみんなと共有します。