6

これはマージンの崩壊が原因である可能性があり、マージンの崩壊について、少なくとも隣接する要素にどのように影響するかは知っていますが、負のマージンが関係している場合にネストされた要素でどのように機能するかはわかりません。

たとえば、このマークアップとそれに付随する CSS では、次のようになります。

マークアップ

<div class="parent">
  <div class="child">
    Child 1
  </div>
</div>

<div class="parent">
  <div class="child negative">
    Child 1
  </div>
</div>

CSS

body {
  background: white;
  padding: 45px;
}

.parent {
  border: 1px solid black;
  margin-bottom: 10px;
}

.negative {
  margin-bottom: -1px;
}

ライブの例はこちら.

2 番目の div の高さを調べると.parent、最初の div よりも 1 ピクセル小さいことがわかります。これは、.negative要素内の負のマージンが原因で発生しました。W3C をざっと見てみたのですが、この動作の説明が見つかりませんでした。

誰かがここで何が起こっているのかを説明し、それに関する W3C 仕様セクションへのリンクを提供してもらえますか?

4

3 に答える 3

8

これはマージンの崩壊が原因である可能性があり、マージンの崩壊について、少なくとも隣接する要素にどのように影響するかは知っていますが、負のマージンが関係している場合にネストされた要素でどのように機能するかはわかりません。

セクション 8.3.1にすべての詳細があります。また、ネストされたボックス間の隣接するマージン、および負のマージンの動作についても説明します。

ただし、ここに表示されているのはマージンの崩壊の影響ではありません。これは、ルールのborder: 1px solid black宣言でそれを否定しているためです。.parentつまり、境界線があると、マージンがマージンと完全に.parent崩壊するのを防ぐことができます。.child.negative

むしろ、これは単に負のマージンがどのように機能するかです。これは、ビジュアル フォーマット モデルのさまざまなセクションで説明されていますが、セクション 11の冒頭で最も簡潔かつ直接的に説明されており、次のように要約されています。

通常、ブロック ボックスのコンテンツは、ボックスのコンテンツの端に限定されます。場合によっては、ボックスがオーバーフローすることがあります。これは、コンテンツの一部または全部がボックスの外にあることを意味します。次に例を示します。

  • ...
  • 子孫ボックスには負のマージンがあり、部分的にボックスの外に配置されます。

代わりに、ここで起こっていることは次のとおりです。

  1. .child.negative要素の負のマージンの絶対値は、.parent要素の実際の高さから ( によって1px) 差し引かれます。

  2. その結果、.child.negative要素自体がオーバーフローします.parent(要素自体の高さが変更されずoverflow、いずれかのデフォルトが でdivあるためvisible)。

  3. マージンの崩壊はここでは有効にならないのでmargin-bottom: 10px、あなたの.parentは影響を受けません。通常のフローの後続の要素は だけ上にシフトされますが1px、これは主に.child.negative要素の負のマージンが原因であることに注意してください。つまり、ステップ 1 の副作用です。

それだけです。

于 2012-11-03T08:26:22.427 に答える
1

使用している場合は.negative { margin-bottom: -1px; }、上部に移動します。この例を参照してください。

ここに画像の説明を入力してください

わかりやすい次のリンクを参照してください。 http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

body {
  background: white;
  padding: 45px;
}

.parent {
  border: 1px solid black;
  margin-bottom: 10px;
  min-height: 30px;
}

.negative {
  margin-bottom: 20px;
}

結論：

たとえば、あなたの場合min-height:30px、親クラスに追加して、それが残るようにする必要がありfixます。positive margins負のクラスに追加した場合にのみ移動した場合。上の図に結果が表示されているからといって、必要なものがすべてわかります。

cssdeskリンクを参照してくださいここをクリックcssdesk

願わくば、それはあなたを助けるでしょう。乾杯。!!

于 2012-11-03T08:18:01.383 に答える
-1

外側の要素に境界線、パディング、コンテンツがない場合、最初と最後の要素の余白が外側の要素に適用されます。

あなたの場合、親ノードには境界線があるため、この場合、マージンの折りたたみは適用されません。内部の子ノードに margin-bottom = -1px があるため、子ノードの外側の高さを計算すると、そのコンテンツの高さ + パディング + ボーダー幅 + マージンになります。なので外から測ると1px少なくなります。そのため、親ノードの高さは上の例よりも 1px 低くなります。より明確に表示するために、子ノードに背景を適用することができます。たとえば、黄色を適用すると、子ノードが親ノードの境界線に重なることがわかります。

しかし、親ノードの境界線を取り除くと、まったく別の状況になります。

たとえば、マージンの崩壊を説明するために、あなたが持っているとしましょう

<div style="background-color:black">
  <div style="height:10px; background-color:white; margin-top: 10px"></div>
</div>

外側のノードには上部に 10 ピクセルのマージンがあると見なされ、内側のノードのマージンは無視されるため、高さ 10 ピクセルのブラック ボックスは表示されません。そして負の状況では、外側のマージンが減少します。

仕様からの引用：

2 つ以上のマージンが折りたたまれた場合、結果のマージン幅は、折りたたまれたマージンの幅の最大値になります。負のマージンの場合、隣接する負のマージンの絶対値の最大値が、隣接する正のマージンの最大値から差し引かれます。正のマージンがない場合、隣接するマージンの絶対値の最大値がゼロから差し引かれます。

詳細情報: https://developer.mozilla.org/en-US/docs/CSS/margin_collapsing

于 2012-11-03T08:03:25.177 に答える