zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden collapsing margins

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.10.2014, 05:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.02.2014
Beiträge: 19
84ck80n3 befindet sich auf einem aufstrebenden Ast
Standard 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>
Es soll halt oben eine rote Box erscheinen.
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?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.10.2014, 07:14
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.10.2014, 09:59
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Zitat:
Zitat von MrMurphy Beitrag anzeigen
Die collapsing-margins beziehen sich auf Elemente, die untereinander stehen.
Nicht nur - auch auf verschachtelte Elementen.
Wenn es nichts gibt, was die Margins trennt (Padding, Border) und das äußere Element keinen BFC (Block Formatting Context) etabliert.
Schlimmer noch – auch auf die vertikale Margins eines einzigen Elementes, wenn das Element kein Inhalt, Padding, Border hat.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
  #4 (permalink)  
Alt 16.10.2014, 12:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.02.2014
Beiträge: 19
84ck80n3 befindet sich auf einem aufstrebenden Ast
Standard

@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?
Mit Zitat antworten
  #5 (permalink)  
Alt 16.10.2014, 13:48
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Zitat:
Zitat von 84ck80n3 Beitrag anzeigen
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.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:04 Uhr.