マージンのマージの詳細な説明:
マージンのマージは Web ページのレイアウトでよく見られる現象です。これをしっかりと理解しておくと、作業に影響を与える可能性があります。効率が低下し、プロジェクトの進行が著しく妨げられることもあります。インターネット上にはすでに関連記事が多数あります。次に、オンライン教科書の概要と例を通してマージンマージの現象を紹介します。
コンセプト:
隣接する 2 つ以上の余白を垂直方向に 1 つの余白に結合する、いわゆる余白結合です。
この現象は水平方向には存在しません。
マージンの結合条件:
1. 空でないコンテンツ、パディング、境界線、および隣接するマージン間に明確な分離がないこと。
2. オブジェクトはすべてドキュメント フロー内にあります。つまり、浮動ではなく、その位置属性値が絶対的または固定的ではない要素です。
マージは兄弟オブジェクト間、または親オブジェクトと子オブジェクトの間に存在する可能性があります。以下で個別に紹介します。
1. 兄弟オブジェクト間のマージン マージ:
例は次のとおりです:
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css"> div{ width:100px; height:100px; } .top{ background-color:green; margin-bottom:20px; } .bottom{ background-color:red; margin-top:10px; } </style> </head> <body> <div class="top"></div> <div class="bottom"></div> </body> </html>上記のコードでは、下の要素の上マージンと上の要素の下マージンがマージされていることがわかります。つまり、2 つの要素間の垂直方向の間隔は 20px+10px=30px ではなく、20px です。 2 つの外側マージンの値が大きくなっていることがわかります。コード例を見てみましょう:
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css"> div{ width:100px; height:100px; } .top{ background-color:green; margin-bottom:-20px; } .bottom{ background-color:red; margin-top:10px; position:relative; left:20px; } </style> </head> <body> <div class="top"></div> <div class="bottom"></div> </body> </html>マージンが正と負の場合、正の最大値と負の最小値を選択し、それらを加算した結果が 2 つのマージンの合計値になります。別のコード例を見てみましょう:
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css"> div{ width:100px; height:100px; } .top{ background-color:green; margin-bottom:-20px; } .bottom{ background-color:red; margin-top:-10px; position:relative; left:20px; } </style> </head> <body> <div class="top"></div> <div class="bottom"></div> </body> </html>オブジェクトのマージンがすべて負の数値の場合、最小の負の数値をマージンとして採用します。
2. 親子のマージンを結合します:
まずコード例を見てみましょう:
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css"> #parent{ width:200px; height:200px; background-color:red; } #children{ width:60px; height:60px; background-color:green; margin:0px auto; margin-top:50px; } </style> </head> <body> <div id="parent"> <div id="children"></div> </div> </body> </html>上記のコードでは、この時点で子要素のマージンが表示されます。親要素には影響しませんが、親要素以外のオブジェクトに作用します。親子マージン結合は、この記事の冒頭で紹介した 2 つのマージン結合バーを満たすだけでなく、親要素がオーバーフロー (表示を除く) や display:inline-block などのコンテキスト レイアウト属性を持つことができないという事実も満たさなければなりません。 。
特記事項:
実際のアプリケーションではこれが最も一般的な状況であるため、上で紹介したマージン マージの例には 2 つのオブジェクトのみが含まれていますが、マージン マージの現象は 2 つのオブジェクトの時間に限定されません。マージン結合の条件が満たされると、マージン結合現象が発生する可能性があります。 コード例は次のとおりです。
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.51texiao.cn/" /><title>外边距合并-蚂蚁部落</title> <style type="text/css"></style> </head> <body> <div style="border:1px solid red;width:200px;"> <div style="margin-top:50px; background-color:green;"> <div style="margin-top:-50px;"> <div style="margin-top:150px;">蚂蚁部落</div> </div> </div> </div> </body> </html>
上記のコードでは、3 つのマージン結合現象が発生します。マージされたマージン値の計算方法はレイヤーごとに計算されるのではなく、上記で紹介したいくつかの原則に従って、負の値と負の値から最小の合計を選択することに注意することが重要です。正の値。選択した値の最大合計は -50px+150px=100px です。
さらに極端なマージ方法もあります。要素自体のマージンもマージされます。コード例は次のとおりです。
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css"></style> </head> <body> <div style="border:1px solid red;width:200px;"> <div style="margin-bottom:50px;margin-top:50px;"></div> </div> </body> </html>
上記のコードの実行結果から、要素自体のマージンもマージされることがわかります。要素自体はマージされますが、この div には高さ、コンテンツなどを含めることはできません。これは、上下のマージンが隣接しておらず、マージンをマージするための条件が満たされていないためです。
元のアドレス: http://www.51texiao.cn/div_cssjiaocheng/2015/0501/510.html
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
