マージン崩壊の問題を解決する方法-CSSチュートリアル-php.cn

マージン崩壊の問題を解決する方法

清浅

リリース： 2018-11-20 15:49:13

オリジナル

10360 人が閲覧しました

この記事はマージン崩壊の問題とマージン崩壊を解決する方法を共有するものであり、一定の参考価値があり、皆様の学習に役立つことを願っています。

Margin は要素の外側のマージンを設定するものです。通常、マージンの値を設定するときは、親要素はブラウザを基準に配置され、子要素は親要素を基準に配置されます。マージンの値をどのように設定しても応答がないという状況がよく発生します。今日は、この問題を解決する方法を紹介します。

htmlコード

<div class="box1">
   <div class="box2"></div>
</div>

ログイン後にコピー

cssコード

.box1{
	width:200px;
	height:200px;
	background-color:rgb(16,128,214);
	}
.box2{
        width:100px;
	height:100px;
        background-color:rgb(128,227,248);
}

ログイン後にコピー

レンダリング

Image 12.jpg

##マージントップ値を設定する場合変更

box1 に margin-top:100px を設定すると、box2 も margin-top:100px を設定します。親要素のみがブラウザに対して 100px 下になりますが、親要素に対する子要素の位置は 100px になります。変更しません。

Image 15.jpg

#ただし、子要素の margin-top セット: 150px が親ボックスの高さより大きい場合、子要素は相対的に配置されなくなります。親要素に移動しますが、ブラウザの位置を基準にして親要素を 150 ピクセル下に移動します。

Image 14.jpg

上記の内容から、余白の縮小とは何であるかを知ることができます

マージン崩壊

マージン崩壊は、親がブラウザに対して相対的に配置されているが、子が親に対して相対的に配置されていない場合に発生します。親

親子要素の垂直方向のマージン。これら 2 つの要素は結合され、最大の

値になります。

## 問題を解決するマージン崩壊の方法

#本質は、ボックスの BFC (ブロックフォーマットコンテキストブロックレベルのフォーマットコンテキスト) をトリガーしてレンダリングルールを変更することです。親要素の

#メソッド 1

position:absolute;

相対位置を設定

追加することでマージン崩壊の問題を解決します。親要素への相対位置属性

メソッド 2

display:inline-block; Image 17.jpg

Set行ブロックレベル要素へ

メソッド 3

float:left および float:right Image 17.jpg

float を使用します。スタイルを変更するには

方法 4

overflow:hidden Image 17.jpg

オーバーフローボックスの表示を部分的に非表示にする

#要約: 以上この記事は以上です。お役に立てれば幸いです。

Image 18.jpg

以上がマージン崩壊の問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。