CSSマージンの知識ポイント

1.マージンのパーセンテージ値

通常の要素のパーセンテージmaiginは、コンテナ要素の幅(幅)に対して相対的に計算されます。

ここでは画像の外側に幅と高さが800 * 600のコンテナを設定します。 img{ マージン: 10% } を設定します。

結果は以下の通りです

結果のマージン値はすべて 800 * 10% = 80px; なので、ここでは

コンテナの幅を基準にして計算されます。三回言ってください 2. 絶対位置のパーセント値

最初に配置された祖先要素

の幅の値を基準にして計算されます。それは親の幅 = 1000 ピクセルなので、マージン = 100 ピクセルです。 3. マージンを使用して 2:1 の適応を実現できます 例えばコンテナが2つあるとします

箱の高さはここでは指定しておりません。 マージンを50%に設定しているため。高さは親コンテナの半分なので、アスペクト比は 1:2 です。

4. 余白の重なり なぜ重なり合うのか

A) マージンの重なり合う2つの特徴

ブロックの水平要素でのみ発生します。 (float要素と絶対要素を除く)

wirte-mode（つまり書き込み形式）を考慮せず、縦方向（margin-top margin-bottom）でのみ発生します

。

B) 何が起こったのですか

1> 隣接する兄弟要素

2> 親の最初と最後の子要素

3>空のブロック。

例 1 隣接する兄弟要素

兄弟要素が2つあります。

ここでの 2 つの p の間には em が 1 つだけあり、em は 2 つではありません。 最初の margin-bottom と 2 番目の margin-top が重なっているためです。

例2 親要素と最後の子要素が重なっています

従来の理論によれば、親要素の息子と父親の間にはマージントップの値80pxが残ることになります。しかし、そうではありません。息子の背景要素は変更されておらず、80 ピクセルは残りません;

ここでは親要素に80pxを設定するだけです;

親子マージンが重なる条件

それでは、マージンとトップの重なりを取り除くにはどうすればよいでしょうか？

その条件を満たさない限り。

親要素は overflow: hidden; border-top padding-top (間にスペースを追加します);

例 3: 空のブロック要素の余白が重なっています。

注意中に内容のない空の要素があります。空要素のマージン重複の条件

4 マージンの重複の計算ルール。

A) 最大値を取る

B) 正の値と負の値を加算する

C) 最も否定的なもの。

5.マージンオーバーラップの意味

A) 連続した段落やリストなど、余白の重なりがなく語尾が1:2で現れると、バラバラに見えてしまいます

B) Web 上の任意の場所に div を直接入れ子にしたり配置したりしても、元のレイアウトには影響しません

C) 複数の欠落している p 要素は、元の読み取りレイアウトに影響を与えてはなりません

実践的な応用

リストを作成するときは、各リストの距離を制御します

.list{

マージントップ: 15px;

Margin-bottom: 15px;

}

より堅牢になり、最後の1つを削除してもレイアウトには影響しません