|
|||
collapsing margins
Hallo Forum!
Ich lerne noch immer aus dem CSS-Buch und habe dort folgendes gefunden: Wenn sich zwei Boxen vertikal berühren und die obere hat margin-bottom 50px und die untere hat margin-top 20px, dann verschmelzen sie zu einem Abstand von 50px, also der Größere gewinnt. Nun erscheint folgender Code: HTML-Code:
div#kopfbereich { background: red; width: 720px; margin-right: auto; margin-left: auto; } h1{ margin-top: 100px; } <body> <div id="kopfbereich"> <h1>Ueberschrift</h1> </div> Nun bekam H1 das margin-top 100px. Jeder Anfänger denkt nun, dass die 100px IN der Box zu sehen sind, aber es soll, laut Buch, anders sein, dass die Box 100px nach unten gesetzt wird. Abhilfe soll ein padding von 1px im div_kopfbreich schaffen, welcher die rote Box dann 100px nach unten setzt. Nun meine Frage: Nach der ersten Logik, "frisst" der große Abstand den kleinen. Hier wären also 100px wesentlich mehr als die voreingestellten 0px. Wieso ist es hier anders herum? Wieso muss da erst ein padding von 1px eingestellt werden? |
Sponsored Links |
|
|||
Hallo,
du hast einen Denkfehler in deinen Überlegungen. Die collapsing-margins beziehen sich auf Elemente, die untereinander stehen. Wie du richtig geschrieben hast müssen dabei margin-bottom und margin-top "aufeinander" treffen. In deinem Beispiel befindet sich die Überschrift jedoch innerhalb des h1-Elements. Das ist ein ganz anderes Thema. Gruss MrMurphy |
Sponsored Links |
|
|||
@MrMurphy: Naja, sooo ein anderes Thema kann das ja nicht sein, denn im Buch ist das ja EIN Thema und wird in EINEM Atemzug, in EINEM Beispiel behandelt.
@etux: Aber wenn es auch auf verschachtelte Elemente Anwendung findet, dann kommt doch die Logik aus dem Buch "Groß frisst Klein" auch zum Einsatz oder nicht. Oben gibt es keinen margin bzw Voreinstellung vom Browser bzw Browser-Reset = 0 Dann kommt das margin von h1 und das ist 100. Also müsste h1 doch gewinnen. aber es wird margin100 oben angezeigt. Wo ist nun mein Denkfehler? |
|
||||
Dein Denkfehler ist, so glaube ich zumindest, dass Du den so entstandenen Margin, an der falschen Stelle erwartest.
Falsch: Der Margin, der gewinnt, bleibt (an Ort und Stelle ) unverändert. Der andere verschwindet. Richtig: Beim Zusammenfallen der Margins (Render, äußere Abstände) entsteht einen um das umschließenden Element wirkenden „neuen“ Margin. Wie groß wird er? So groß, wie der größere der „ursprünglichen“ Margins. Wenn einen, mehreren, oder alle Margins negativen Werten haben, gibt es auch Regel für die Berechnung. Steht aber bestimmt auch in Deinem Buch. |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit collapsing margins | timmai | CSS | 2 | 14.09.2010 21:13 |
overflow:auto im Universalselektor gegen collapsing margins? | Ave | CSS | 4 | 28.03.2010 17:07 |
Problem mit Collapsing Margins | opa-rudi | CSS | 3 | 16.02.2009 23:18 |
Problem mit Collapsing Margins | opa-rudi | CSS | 17 | 04.12.2008 23:40 |
Collapsing Margins von benachbarten Elementen | matthias | CSS | 1 | 19.03.2008 20:08 |