24
Also kommt Margin Collapsing im Wesentlichen vor, wenn Sie keinen Rand oder Padding oder Rahmen zu einem gegebenen div Element setzen?CSS Margin Collapsing
A
Antwort
73
Nr Wenn Sie zwei benachbarte vertikale Ränder haben, desto größer der beiden verwendet wird und die anderen ignoriert. Wenn Sie beispielsweise zwei Blockanzeigeelemente haben, A, gefolgt von B darunter, und A hat einen unteren Rand von 3em, während B einen oberen Rand von 2em hat, dann ist der Abstand zwischen sie werden 3em sein.
Wenn Sie einen Rahmen oder einen Abstand festlegen, wird das Zusammenklappen verhindert. Im obigen Beispiel ist der Abstand zwischen den beiden Elementen dann 5em.
Wenn Sie keine Ränder festlegen, werden die Ränder nicht reduziert. Es hat überhaupt nichts mit dem verwendeten Elementtyp zu tun - es gilt für alle Elementtypen, nicht nur <div> Elemente.
Lesen Sie the CSS 2.1 specification für weitere Details.
4
„der Ausdruck Ränder Kollabieren bedeutet, dass angrenzende Ränder (keine nicht-leeren Inhalt, Klotzen oder Randbereiche oder Zwischenraum, sie separat) von zwei oder mehr Box verbinden (die miteinander oder nested nächste sein können) zu bilden, eine einzige Marge. "
Verwandte Themen
- 1. Warum berücksichtigt GetComputedStyle nicht den Margin Collapsing?
- 2. Css Margin-Top vs Margin-Bottom
- 3. CSS: margin ein img
- 4. HTML/CSS Margin Ausgabe
- 5. CSS margin-top nicht
- 6. jQuery .css ("margin-left")
- 7. Margin-Top-Eigenschaft in CSS
- 8. Floated List Margin in CSS
- 9. CSS: Top vs Margin-top
- 10. css: margin-top bewirkt Bildlaufleiste
- 11. CSS-Margin-bottom funktioniert nicht
- 12. Minimierung CSS „margin“ Regeln eine „margin:“ Regel mit Javascript
- 13. Responsive Youtube Video - Collapsing
- 14. Collapsing Tree funktioniert nicht
- 15. Collapsing boxes (image menu)
- 16. CSS margin-top funktioniert nicht in IE7
- 17. CSS Auto-Breite-Layout ohne margin: auto
- 18. "margin-top" funktioniert nicht in css
- 19. CSS float mit min-width und margin
- 20. CSS Fixed Position mit Auto Margin
- 21. CSS * {margin: 0; padding: 0;} override
- 22. CSS margin-left Übergang funktioniert nicht
- 23. Warum zeigt Margin-Bottom als Margin-Top?
- 24. jquery - Collapsing/Expanding divs?
- 25. Expanding/Collapsing divs
- 26. Collapsing Toolbar Titel verschwindet
- 27. WhatsApp wie Collapsing Toolbar
- 28. Collapsing Toolbar und DrawerLayout
- 29. Können wir Min-Margin und Max-Margin, Max-Padding und Min-Padding in CSS definieren?
- 30. fancybox Inhalt margin-left
Die Antwort wird mit einigen Änderungen aktualisiert: 1. Im '3em/2em' Beispiel möchten Sie vielleicht stattdessen absolute Einheiten verwenden; in diesem Fall ist die 2em/könnte/größer als die 3em 2. "Wenn Sie einen Rahmen oder Padding ..." - Dies ist nur in bestimmten Fällen, nicht in der Standard "A gefolgt von B" eine –
3. "Wenn Sie keine ..." konventionell für DIVs, aber Margin-Kollaps WILL beeinflussen die meisten Elemente standardmäßig –
+1 - gute Antwort. Randkollaps tritt auch nicht auf, wenn Elemente floaten, absolut positioniert oder Inline-Block sind. Weitere Informationen: http://reference.sitepoint.com/css/collapsingmargins –