7

私はこの問題に何度か遭遇しました。何が原因なのかはまだわかりません。

再現:

  1. http://jsbin.com/ibowed/1/edit を開く
  2. CSS パネル.l-search-index .top {で 26 行目を見つけます
  3. border: 1px solid #ff0000;に変更border: 0;
  4. なに？

ブラウザ: クロム、しかし、私はあなたが他のもので試すことができると思います..

お知らせ下さい！

4

3 に答える 3

7

これは、余白が重なり合う方法と、特定のプロパティがそれらを強制的に含める方法に関係しています。ページに 2 つの div を配置し、どちらも 100 ピクセルの余白を設定すると、これらの div 間の間隔は 100 ピクセルになります。200pxではありません。これは、余白が他の余白と重なることが許可されているためです。それがマージンの仕組みです。それは良いことです。

ただし、div を別の div 内に配置すると、両方ともマージンがあり、それらのマージンも重なります。子要素の余白が親の余白に重なっています。

ただし、一部のプロパティ (境界線はご存じのとおりですが、パディングとオーバーフローも含まれます) は、親が子の余白をオーバーラップするのではなく、それらの余白を含むように強制します。

誰かがもっと技術的な説明をしてくれると思いますが、それが私が起こっていることについての考え方です。

簡単なテスト ケースを次に示します。http://jsbin.com/ukodus/2/ CSS の行の前にある を
削除して、効果を確認します。//

「この動作は、マージンの縮小と呼ばれます。上下のマージンのみが縮小され、左右のマージンは縮小されません。」— @シマノン

于 2013-05-08T12:16:19.330 に答える
6

これはマージンの崩壊の非常に直観的でないケースです:

§ CSS 仕様の 8.3.1 では、マージンがどのように処理され、どのような状況でマージンが折りたたまれるかについて説明しています。ルールを理解するのは簡単ではありません (特殊なケースがいくつかあります) が、仕様の関連部分を引用します。

CSS では、2 つ以上のボックス (兄弟である場合とそうでない場合があります) の隣接するマージンを結合して、1 つのマージンを形成できます。このように組み合わされた余白はつぶれていると言われ、その結果の組み合わされた余白はつぶれた余白と呼ばれます。

2 つのマージンが隣接しているのは、次の場合のみです: ライン ボックス、クリアランス、パディング、境界線がない場合

(私が強調)

したがって、境界線を削除するとすぐに、要素の垂直マージンが崩壊します。あなたの場合は、負のマージンがあるため、少し複雑になります。

これを修正するには、overflowプロパティを設定するかpadding:1px、.top要素に a を適用します。

于 2013-05-08T12:25:00.897 に答える