CSS属性のマージン

0. 独自の視覚的な幅への影響

1>幅の値が設定されていない標準ドキュメント フローのブロック要素の視覚的な幅を変更します

幅が設定されていないブロック要素の標準ドキュメント フロー, コンテンツがある場合、または高さを設定している場合、自身の幅は親要素の幅の 100% になります。このとき、ブロック要素に水平マージンの値を設定すると、要素の視覚的な幅が変更されます。ただし、ブロック要素の高さは固定またはそのコンテンツの高さと同じであり、伸縮しないため、高さは変更できません。

この機能はブートストラップ レイアウトで役立ちます。

<p class="wrap">
  父元素padding: 0 10px;  <p class="yellow">此block元素没有设置margin值</p>
  <p class="red">此block元素设置margin-left:-10px;margin-right:-10px; 拉伸了元素宽度</p></p>

* {margin:0; padding:0;}.wrap {
  width: 400px;
  height: 400px;
  margin: 50px auto;
  padding: 0 10px;
  border: 1px solid #ccc;
}.red {
  height: 100px;
  background-color: red;
  margin: 0 -10px;
}.yellow {
  height: 100px;
  background-color: yellow;  
}

2> 幅は設定されていないが、位置が設定されている絶対配置要素の表示/非表示を変更します (位置は上下、左/右などのペアで設定されます)。幅と高さ

絶対的に配置された要素が幅を設定せず、上/下、左/右の値を設定すると、要素は引き伸ばされます。たとえば、 left:0; right:0; と設定すると、要素の幅は、相対的に配置された最初の親要素の幅の 100% になります。このとき、要素の視覚的な幅も変更できます。マージン。同様に、絶対的に配置された要素の場合、視覚的な高さを変更することもできます。

<p class="wrap">
  父元素position: relative;  <p class="yellow">绝对定位,并且设置top:0; bottom:0; 垂直拉伸元素，通过设置margin来改变可视高度</p></p>

* {margin:0; padding:0;}.wrap {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 50px auto;
  border: 1px solid #ccc;
}.yellow {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  margin: 50px 0;
  background-color: yellow;  
}

1 要素のマージン値が通常のドキュメント フローにある要素の場合、パーセンテージ値のマージンはパディングと同じです。パーセンテージ値。その実際の値は、親要素の幅 * パーセンテージに等しくなります

要素が絶対配置に設定されている場合、その実際の値は、その要素に対して相対的に配置された最初の親要素の幅 * パーセンテージに等しくなります

<p class="wrap">
  父元素宽度400px;  <p class="yellow">margin-top:10%; 实际的margin-top=400px*10%=40px</p></p>

* {margin:0; padding:0;}.wrap {
  width: 400px;
  height: 400px;
  margin: 50px auto;
  border: 1px solid #ccc;
}.yellow {
  width: 200px;
  height: 200px;
  margin-top: 10%;
  background-color: yellow;  
}

2. マージンの重なり

マージンの重なりは通常、兄弟要素間や親要素と子要素間で発生します。いくつかの小さなトラブルが発生しました。マージンが重なっています。状況を要約しましょう。

1>兄弟要素間

2つの要素間でマージンの重なりが発生する場合、実際の値は次のようになります:

両方のマージン値が正の場合、実際の値 = 2つの大きい方の値
の場合2 つのマージン値は 1 つは正、もう 1 つは負であり、実際の値 = 2 つの値の合計
両方のマージン値が負の場合、実際の値 = 2 つの絶対値の大きい方
では、マージンの重複はいつ発生するのでしょうか?

隣接する2つの兄弟要素は、標準ドキュメントフローのブロック要素である限り、縦方向に余白の重なりが発生します。

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

border-top/bottomを設定
padding-top/bottomを設定
overflow:hidden/autoなどの属性を設定、実装BFC
3. margin の auto 値

要素を水平方向に中央揃えにするために margin: 0 auto を設定します。これは auto の特定の役割にのみ使用されます。価値を知っている人はほとんどいないかもしれません。

簡単に言うと、固定の幅や高さの値が設定されていない要素については、自動的に伸縮できる場合は、固定値を設定した後、auto を使用して残りのスペースを割り当てることができます。

例えば、固定幅のブロック要素を右側に表示したい場合は、float 属性を使用する方法が一般的ですが、これも実現できます。 with margin-left: auto;:

<p class="wrap">
  <p class="red">margin-left: auto;</p></p>

* {margin:0; padding:0;}.wrap {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 50px auto;
  border: 1px solid #ccc;
}.red {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-left: auto;
}

マージン値を自動に設定するための有効なシナリオには以下が含まれます:

通常の固定幅ブロック要素、水平方向の設定は次のとおりです。有効;
ペアの left が設定されている場合、固定幅または固定高さが有効です
親要素が display: flex; の場合、子要素の margin 値は auto で、どちらも有効です
その他 複数の CSS 属性と margin に関連する記事については、PHP 中国語 Web サイトに注目してください。