マージンの詳しい説明 merging_html/css_WEB-ITnose
マージンのマージの詳細な説明:
マージンのマージは 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
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7555
15
1382
52
83
11
28
96
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？
Mar 20, 2025 pm 05:56 PM
この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTMLでの開始タグの例は何ですか？
Apr 06, 2025 am 12:04 AM
Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。
