CSS でのマージンの折りたたみ: 初心者ガイド

導入

スタイルを適用しても期待どおりに機能しないことほどイライラすることはありません。マージンの崩壊は、予期しないスタイリング結果を引き起こす現象の 1 つです。したがって、マージンの縮小とは何ですか?また、CSS のマージンにどのような影響を与えるのでしょうか?

マージンの縮小

マージンの折りたたみは、要素の外側の間隔を制御する CSS プロパティのマージンから生じます。名前が示すように、マージンの折りたたみは、隣接する要素のマージンが合計されるのではなく、結合または 1 つに「折りたたまれる」ときに発生します。これは通常、兄弟要素間、または親要素と子要素の間で発生します。たとえば、2 つの兄弟要素にマージンがある場合 (1 つは下マージンが 20 ピクセル、もう 1 つは上マージンが 30 ピクセル)、マージンの合計は 50 ピクセルになると予想できます。ただし、マージンの縮小により、大きい方の 30px のマージンのみが適用され、小さい方の 20px のマージンは縮小されます。

.element1 {
    margin-bottom: 20px;
}
.element2 {
    margin-top: 30px;
}

さらに、親要素にパディングやボーダーがなく、その子要素に上マージンがある場合、マージンが親を超えて「折りたたまれ」、親の配置に影響を与える可能性があります。

.parent {
    margin-top: 0;
}
.child {
    margin-top: 20px;
}

.child の上部 20 ピクセルのマージンが .parent の外側で折りたたまれ、親全体が 20 ピクセル下に移動する可能性があります。

結果として生じる間隔が期待と一致しない可能性があるため、これは初心者開発者を混乱させる可能性があります (まあ、私も最近まで知りませんでした)。

それを回避する方法

• パディングまたは境界線を追加: 親要素に少量のパディングまたは境界線を追加すると、マージンの崩壊を防ぐことができます。

.parent {
    padding-top: 1px; /* or border-top: 1px solid transparent; */
}

• オーバーフロー プロパティの使用: 親のオーバーフロー プロパティが表示以外に設定されている場合 (例: overflow: hidden;)、マージンの折りたたみを防ぐことができます。

.parent {
    overflow: hidden;
}

• フレックスボックスまたはグリッド レイアウトを使用する: これらのレイアウト方法は、設計によりマージンが崩れる問題を回避します。

フレックスボックスの例:

.parent {
    display: flex; /* Flexbox layout */
    flex-direction: column; /* Stack children vertically */
    border: 1px solid #000; /* Just for visibility */
}

.child1, .child2 {
    margin: 20px 0; /* Vertical margins that won't collapse */
    background-color: lightblue;
}

グリッドの例

.parent {
   display: grid; /* Grid layout */
   grid-template-rows: auto auto; /* Define two rows */
   border: 1px solid #000; /* Just for visibility */
 }

.child1, .child2 {
     margin: 20px 0; /* Vertical margins */
     background-color: lightgreen;
 }

• Float または Inline-Block を使用する: 子要素をフローティングするか、表示するように設定します: inline-block;余白の崩れも防ぎます。ただし、float を目にすることはめったにありませんが、レガシー コード ベースの場合に備えて知っておくと良いでしょう。

フロートの例:

.parent {
    border: 1px solid #000; /* Just for visibility */
 }

 .child1, .child2 {
     float: left; /* Prevents margin collapsing */
     width: 100%; /* Full width */
     margin: 20px 0; /* Vertical margins */
     background-color: lightcoral;
 }

インラインブロックの例

.parent {
   border: 1px solid #000; /* Just for visibility */
}

.child1, .child2 {
    display: inline-block; /* Prevents margin collapsing */
    width: 100%; /* Full width */
    margin: 20px 0; /* Vertical margins */
    background-color: lightyellow;
}

結論

マージンの折りたたみを理解することは、特にブロックレベルの要素を操作する場合に、Web レイアウト内で一貫性のある期待どおりのスペースを確保するのに大きく役立ちます。 、、 などのインライン要素は、ブロックレベルの要素と比較して垂直方向のマージンを生成する際の動作が異なるため、一般にマージンの折りたたみの影響を受けないことに注意してください。マージンの縮小は主に、

、

、

などのブロックレベルの要素で問題を引き起こします。これらの要素には相互に作用する垂直マージンがある可能性があるためです。

参考文献

• マドン
• w3Schools

以上がCSS でのマージンの折りたたみ: 初心者ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

css Float if for Property this display overflow margin padding border

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。