Angabe von border verursacht eine Verschiebung

[Fabian St.]

Hi!

Ich hänge im Moment etwas bei folgendem Problem:

Ein Bild (52px x 52px) soll in einem <div> von einem Absatz (<p>) umflossen werden. Das klappt auch soweit, nur wird das Bild, wenn ich dem <div> einen Rahmen gebe, nach oben verschoben. Da dies nur in den Geckos sowie im Opera auftritt, muss es ein Fehler meinerseits sein.

Weiß jemand eine Lösung hierfür?

Online-Beispiel: http://fabis-site.net/test.html

Grüße,
Fabian St.

[MudGuard]

Hi,

Ein Bild (52px x 52px) soll in einem <div> von einem Absatz (<p>) umflossen werden. Das klappt auch soweit, nur wird das Bild, wenn ich dem <div> einen Rahmen gebe, nach oben verschoben. Da dies nur in den Geckos sowie im Opera auftritt, muss es ein Fehler meinerseits sein.
Weiß jemand eine Lösung hierfür?

Durch die border sind die margin-top von p und umgebendem div nicht mehr aneinandergrenzend (adjoining), kollabieren also nicht mehr.
Siehe Abschnitt 8.3.1 aus CSS2: http://www.w3.org/TR/REC-CSS2/box.html#collapsing-margins

Wenn das p-Element im div keinen oberen margin haben soll, setz ihn auf 0.

cu,
Andreas

[Fabian St.]

Hi Mudguard!

Sorry, für die späte Rückmeldung...

Durch die border sind die margin-top von p und umgebendem div nicht mehr aneinandergrenzend (adjoining), kollabieren also nicht mehr.
Siehe Abschnitt 8.3.1 aus CSS2: http://www.w3.org/TR/REC-CSS2/box.html#collapsing-margins

Nur zum Verständnis des obigen Textes:

"In this specification, the expression collapsing margins means that adjoining margins [...] of two or more boxes [...] combine to form a single margin."

Wie hat man sich dieses "combine to form a single margin" zu verstehen? Welches Element hat dann margin, wenn beide zu einem zusammenfallen?

D.h also der Grund für mein (ehemaliges) Problem war dann der, dass der margin von p und div durch den border nicht mehr zusammenfallen, oder?

Wenn das p-Element im div keinen oberen margin haben soll, setz ihn auf 0.

Ok, danke das hat geholfen :-)

Grüße,
Fabian St.

[MudGuard]

Hi,

Sorry, für die späte Rückmeldung...

Kein Problem, besser spät als nie.

"In this specification, the expression collapsing margins means that adjoining margins [...] of two or more boxes [...] combine to form a single margin."
Wie hat man sich dieses "combine to form a single margin" zu verstehen? Welches Element hat dann margin, wenn beide zu einem zusammenfallen?

Das hängt auch davon ab, woher diese margins kommen.
Handelt es sich um margin-bottom und margin-top von geschwistern, ist der margin zwischen den Elementen.
Handelt es sich um zweimal margin-top von Papa- und Kind-Element, wird der Margin außerhalb des Papas angelegt - siehe auch https://forum.selfhtml.org/?t=97419&m=592917 und die Antworten dazu.

D.h also der Grund für mein (ehemaliges) Problem war dann der, dass der margin von p und div durch den border nicht mehr zusammenfallen, oder?

Genau - durch die dazwischenliegende border grenzen die beiden margins nicht mehr aneinander, daher fallen sie auch nicht zusammen.

cu,
Andreas

[Fabian St.]

Hi Mudguard!

Das hängt auch davon ab, woher diese margins kommen.
Handelt es sich um margin-bottom und margin-top von geschwistern, ist der margin zwischen den Elementen.
Handelt es sich um zweimal margin-top von Papa- und Kind-Element, wird der Margin außerhalb des Papas angelegt - siehe auch https://forum.selfhtml.org/?t=97419&m=592917 und die Antworten dazu.

Vielen Dank für die ausführliche Erklärung! Wieder ein Beispiel, dass ich noch viel lernen muss ;-)

Den anderen Thread werde ich mir mal ausgiebig zu Gemüte führen.

Grüße,
Fabian St.

[XaraX]

Hi!

Weiß jemand eine Lösung hierfür?

Wenn ich es richtig verstanden habe, soll also ein Border um #box-border herum sein und das Bild #image das gleiche margin-top haben, wie <p> haben.

margin-top ließe sich sowohl für #image, als auch für p notieren ;)

Gruß aus Berlin!
eddi

[Fabian St.]

Hi XaraX!

Wenn ich es richtig verstanden habe, soll also ein Border um #box-border herum sein und das Bild #image das gleiche margin-top haben, wie <p> haben.

Genau :-)

margin-top ließe sich sowohl für #image, als auch für p notieren ;)

Ja, aber meine Frage zielte auch darauf ab, warum das oben beschriebene Verhalten auftritt. Trotzdem auch dir Danke!

Grüße,
Fabian St.