CSS でのマージンの折りたたみ: 初心者ガイド-CSSチュートリアル-php.cn

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

Barbara Streisand

リリース： 2024-09-24 18:16:02

オリジナル

1061 人が閲覧しました

Collapsing Margins in CSS: A Beginner

導入

スタイルを適用しても期待どおりに機能しないことほどイライラすることはありません。マージンの崩壊は、予期しないスタイリング結果を引き起こす現象の 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;
}

ログイン後にコピー