先ほどの言葉
マージンは、ボックスモデルのいくつかの属性の中でも非常に特殊な属性です。いくつかの例を挙げます。マージンのみが現在の要素の背景を表示しません。マージンのみが負の値に設定できます。マージンと幅と高さは自動をサポートし、マージンには非常に奇妙な重なり特性があります。過去のブログ記事では証拠金の基礎知識やマイナス証拠金の具体的な使い方について詳しく紹介してきました。この記事では、オーバーラップ、自動、無効な状況を含むマージンマージンのいくつかの重要な部分を詳しく紹介します
オーバーラップ
【前提】
マージンのオーバーラップはマージンマージとも呼ばれます。この状況には2つの前提条件があります。発生
1. ブロック要素上でのみ発生（float、absolute、inline-block要素を除く）
2. 縦方向のみ発生（writing-modeに関係なく）
【分類】
マージン重複には以下の 3 つの状況が含まれます
1. 隣接する兄弟要素
<style>
p{
line-height: 2em;
margin:1em 0;
background-color: lightblue;
display:inline-block;
width: 100%;
}
</style>
<p>兄弟一</p>
<p>兄弟二</p>ログイン後にコピー
2. 親要素と最初または最後の子要素間のマージンの重複は、マージン転送とも呼ばれます
条件
。隣接する兄弟要素のマージンのオーバーラップでは、親子マージンのオーバーラップは次の条件を満たす必要があります (マージンとトップのオーバーラップを例にします):
a 親要素が BFC 要素ではない
b.要素にpadding-top値がない
c. 親要素にborder-top値がない
d. 親要素と最初の子要素の間にインライン要素の分離がない場合
は親子レベル margin-bottom Overlap、項目 d は親要素と最後の子要素の間にインライン要素の分離がないように変更され、親要素は高さなしの制限 min-height も満たさなければなりません, max-height
3, 空のブロック要素
<style>
.box{
background-color: pink;
height:30px;
}
.inner{
margin-top: 1em;
background-color: lightblue;
}
</style>
<p class="box">
<p class="inner">子级</p>
</p>ログイン後にコピー
以下の結果から、空のブロック要素は親の margin-top + margin-bottom を合計高さ 2em まで拡張する必要があることがわかりますが、マージンの重なりは 1em のみ
同様に、空のブロック要素にもマージンの重なりがある いくつかの条件を満たす必要がある
a. 要素に境界値がない
b. 要素にパディング値がない
c.
中にはインライン要素はありません d. height または min-height はありません
［ルール］
2 つは垂直方向のマージンは、両方の垂直方向のマージンが負の値に設定されている場合、ブラウザは大きい方の値を採用します。ブラウザは 2 つのマージンの最大絶対値を選択します; 正のマージンと負のマージンを組み合わせる場合、正のマージンは Distance からこの負のマージンの絶対値を引いたものになります
簡単に言えば、最大の正の値を取ることです。 、正の値と負の値、そして最も負の値を加算します
【用途】
Web ページのレイアウトでは、余白が重なるため このため、私たちは余白を「問題のスタイル」とみなして、あまり使わないことがよくあります。できるだけ。しかし、実際には大きな役割を果たしています
HTMLドキュメントは、もともと情報を表示するためだけに作成されました。 HTML 文書がデフォルトのスタイルのみを使用するという前提の下で、上下のマージンが重ならない場合、次の問題が発生します。 1. 連続した段落またはリストの場合、マージンの重なりがない場合、最初のマージンと下マージンの間の間隔が長くなります。最後の項目は他の兄弟要素と一緒に表示されます: 2、レイアウトが不自然です。 2. Web のどこかに裸の ps をネストしたり直接配置すると、元のレイアウトに影響を及ぼします。これは Webデザイン原則に反します。空の ps の数が残されると、元の読み取りレイアウトに影響を与えるため、リスト項目では margin-top と margin-bottom を同時に使用する必要があります。このようにして、ページ構造はより堅牢になり、最後の要素の削除や位置の変更によって元のレイアウトが破壊されることはありません
【新しい属性】
-webkit-margin-collapse
<style>
.box{
background-color: lightgreen;
overflow: hidden;
}
.void{
margin: 1em 0;
}
</style>
</head>
<body>
<p class="box">
<p class="void"></p>
</p>
一行文字ログイン後にコピー
auto
幅/高さおよびマージンのみ auto に設定できます。 auto については CSS のビジュアル書式設定で詳しく紹介されています。以下、margin:autoに関する部分のみ紹介します
【margin:autoで縦方向のセンタリングができない理由】
横方向のセンタリングができる理由は、デフォルトでブロックレベルの要素の幅が親要素を埋めるためです。 width を固定値に設定し、左右のマージンを auto に設定すると、残りのスペースを均等に分割できます
ブロックレベル要素の高さのデフォルトはコンテンツの高さであり、親要素の高さとは直接関係しないため、垂直方向は中央揃えできません。上下のマージンが自動に設定されている場合、それらはリセットされます。 to 0
【margin:autoを使用すると画像を水平方向に中央揃えできない理由】
ブロックレベルの要素を垂直方向に中央揃えできないのと同様に、画像を水平方向に中央揃えにすることはできません。画像の幅はデフォルトで独自の幅になり、親要素の幅に直接関係しないためです。左右のマージンを auto に設定すると 0 にリセットされます
そのため、画像を水平方向に中央揃えにするには、display:block 要素に設定する必要があります
【垂直方向の中央揃えを実現する】
マージンの使用: auto で垂直方向のセンタリングを実現するには、次の 2 つの方法があります
1. writing-mode を使用します:vertical-lr;
writing-mode はページの流れの方向を表し、デフォルトは水平方向です。垂直方向に変更すると、垂直方向のセンタリングは実現できますが、水平方向のセンタリングはできなくなります
2. 要素を 絶対配置 要素に変更します (IE7 ブラウザはサポートしていません)
要素を
絶対配置 要素に変更した後、絶対配置要素を top :0;bottom:0; に設定すると、絶対配置要素が配置された親の高さに直接関連付けられます。次に、margin: 0 auto; を設定して、margin-top と margin-bottom が残りのスペースを均等に分割して垂直方向のセンタリングの効果を実現します
無効な状況
1. インライン要素の垂直方向のマージンは無効です インライン要素の垂直方向のレイアウトは主に Line-height と垂直方向の配置
vertical-align によって行われますが、垂直方向のマージンは影響を受けないため、垂直方向のレイアウトには影響しません。表示モードではマージン領域には要素の背景が表示されないため、自身の要素の表示には影響しないため、インライン要素の縦マージンは無効になります
【注意】 の場合は除きます。 inline-block または、writing-mode をvertical-lr に設定する 2. 一部の
table 要素の margin が無効です <thead>``<tbody>``<tfoot>``<tr>``<col>``<colgroup>``<td>``<th>
margin を設定できません。表示属性は、表示がテーブル関連型(table-caption、table、inline-tableを除く)で、マージン宣言が無効です
3. 絶対配置要素の非配置方向のマージン値は、無効
絶対配置要素のマージン 絶対配置要素はドキュメントフローから外れ、他の要素ノードと関係がないため、値は常に有効です
4. マージンBFC によるものは無効のようです 左の要素は float を使用し、右の要素が overflow-hidden を使用して 2 列アダプティブ レイアウトを実装する場合、右の要素の
margin-left の値は、効果を見てください。これは、margin-left が画像の右側ではなく、親要素の左側を基準にしているためです
5. インライン機能によるマージンは無効です A p に画像が含まれており、マージンが- 画像の上部が十分に小さいため、画像が上に移動しなくなります。これは、画像が
インライン要素 であり、インライン要素の垂直方向の配置プロパティの影響を受けるためです。デフォルトのベースラインの配置。例として、ページ上の仮想の大文字 X を取り上げます。
以上がCSS マージン要素についての深い理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
