CSS マージンの重複とその防止方法

2 つ以上のブロックレベル ボックスの垂直に隣接するエッジが重なり合っています。結果として得られる境界線の幅は、隣接する境界線の幅の中で最大になります。負の境界が発生した場合、最大の絶対値を持つ負の境界が最大の正の境界から減算されます。正の境界がない場合、絶対値が最大となる負の境界がゼロから減算されます。注意: 親子関係または兄弟関係にある要素では、隣接するボックスは生成されない場合があります。

ただし、重複する境界には例外があります。

1. 水平余白は重なり合わない。

2. 仕様書では、2 つ以上のブロックレベル ボックス モデルの隣接する垂直余白が重なり合います。最終的なマージン値は次のように計算されます。

a. すべてが正の値である場合、最大の値を取得します。

b. すべてが正の値ではない場合は、絶対値を取り、正の値から最大値を減算します。

c. 正の値がない場合は、絶対値を取得し、最大値を 0 から引きます。

注: 隣接するボックスは DOM 要素によって動的に生成される場合があり、隣接関係や継承関係はありません。

3. 隣接するボックスモデルのうち、いずれかがフローティング（float）の場合、垂直マージンは重なりません。フローティングボックスモデルとその子要素間でも同様です。

4. オーバーフロー属性が設定された要素とその子要素間の余白は重なりません (オーバーフロー値が表示されている場合を除きます)。

5. 絶対配置 (position:absolute) のボックス モデルの場合、垂直マージンは重なりません。また、ボックス モデルとその子要素の間でも同様です。

6. display:inline-block が設定された要素は、子要素であっても垂直余白が重なりません。

7. ボックス モデルの上部と下部の余白が隣接している場合、その余白が重なり合って、その余白を覆う (折り畳まれる) ことがあります。この場合、要素の位置は、隣接する要素の余白が重なっているかどうかによって決まります。

a. 要素の margin が親要素の margin-top と重なる場合、ボックス モデルの border-top 境界定義は親要素のものと同じになります。

b. さらに、どの要素の親要素もマージンの重なりには関与しません。つまり、親要素の margin-bottom のみが計算に関与します。要素の border-top が 0 以外の場合、要素の border-top エッジは以前と同じように配置されます。

クリアが適用された要素の margin-top は、ブロック レベルの親の margin-bottom と重なることはありません。

すでにオーバーラップによって覆われている要素の配置は、すでにオーバーラップしている他の要素の配置には影響しないことに注意してください。border-top の位置は、これらの要素の子要素を配置する場合にのみ必要です。

8. ルート要素の垂直余白は重なりません。

マージンの重なりの例

マージンの重なりとは、垂直に隣接する 2 つのブロックレベル要素の上部マージンと下部マージンが出会うと、マージンが重なり合い、重なり合った後のマージンが大きい方のマージンと等しくなる現象を指します。

誰もが簡単かつ効率的に学習できるように、フロントエンドエンジニアやフルスタックエンジニアになるための道のりで困難を克服するのに役立つ大量の情報を無料で共有します。ここで、フロントエンド フルスタック学習交換サークル 784783012 をお勧めします。グループに参加して、一緒に議論し、学び、進歩することを歓迎します。

実際に学習を始めると、どこから始めればよいのかわからず、効率が低下し、学習を続ける自信にも影響が出るのは避けられません。

しかし、最も重要なことは、どのテクノロジーに重点を置く必要があるかがわからず、学習時に罠に陥ることが多く、最終的に多くの時間を無駄にするため、効果的なリソースが依然として必要であるということです。

アイコン：

重なり合うもう 1 つの現象は、ある要素が別の要素に含まれている場合、子要素も親要素と重なることです。重なり合った後の外側の余白は、2 つのうち大きい方の余白に等しくなります。

同様に、空の要素にコンテンツがない場合、その上余白と下余白も重なります。

重なり合う余白の意味

マージンの重なりは、通常のフローのドキュメントの上余白と下余白の間でのみ発生します。この一見奇妙なルールには、実際的な意味があります。一連の通常のブロックレベル要素 (段落 P など) を上下に配置すると、ブロック要素間の余白が重なり合うため、段落間の距離が 2 倍にならないことを想像してください。

マージンの重複を防ぐためのソリューション:

重なり合う余白には独自の意味がありますが、デザインで要素が重なり合わないようにしたい場合もあります。以下に参考となる提案をいくつか示します。

1. 代わりに外側の要素のパディング
2. 内部要素の透明な境界線 border:1px solid transparent;
3. 内部要素はposition:absolute:で絶対配置されます。
4. 外側の要素 overflow:hidden;
5. 内部要素に float:left; または display:inline-block を追加します。
6. 内部要素のパディング: 1px;

要約する

上記は、エディターが紹介した CSS マージンの重なりと防止方法です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!