Auswirkung von Padding auf Eltern Element

Hallo!

Vielleicht stehe ich gerad auch einfach nur tierisch auf dem Schlauch.
Ich habe mal ein kleines HTML Dokument erstellt, das mein Problem darstellen soll.

http://www.steiger4.de/stuff/padding.html

Die blaue und die grüne Box haben laut CSS keinen Abstand zueinander.
Dennoch wird eine Lücke zwischen ihnen dargestellt, da sich in der grünen Box ein Tag befindet, der u.a. einen Abstand nach oben besitzt.

Warum zum Teufel wird das gesamte Eltern-Element (grüne Box) nach unten geschoben? Müsste nicht das Padding des nur innerhalb der grünen Box gelten?
Wie ist das ganze umzusetzen?

Danke und
mit freundlichem Gruß
Christoph

Moin,

ich musste dabei sofort an „collapsing margins“ denken - nur andersrum?

Ist das was hier im Hinweis nach collapsing margins beschrieben wird, nicht das, worum es bei Dir geht?
http://wiki.selfhtml.org/wiki/CSS/Box-Modell

Grüße,
-Efchen

P.S.: Dass Dein HTML-Code aber auch weltfremd und semantischer Unsinn ist, weißt Du ja sicher. Es ist also eine rein theoretische Frage, die in den meisten Fällen beim Erstellen von Webseiten ohne Relevanz bleibt.

Hallo,

Die blaue und die grüne Box haben laut CSS keinen Abstand
zueinander.

naja, laur Deinem CSS, aber kennst Du die Browservorgaben?

Dennoch wird eine Lücke zwischen ihnen dargestellt, da sich in
der grünen Box ein Tag befindet, der u.a. einen Abstand
nach oben besitzt.

Auf dem p liegt im FF 14.0.1 ein margin: 1em 0;

Warum zum Teufel wird das gesamte Eltern-Element (grüne Box)
nach unten geschoben?

Da der Paragraph einen oberen und unteren Rand hat und ein Block-Element ist.

Müsste nicht das Padding des nur innerhalb der grünen Box :gelten?

Ein Padding (innen) würde nur innerhalb des gelten, der Abstand kommt aber durch einen Margin (aussen).

Wie ist das ganze umzusetzen?

Wenn Du den Margin nicht haben willst, dann musst Du ihn halt in Deinem CSS zurücksetzen: p{margin: 0;}

Gruß

osmodius

Okay, dann eben ein margin - ich verstehe jedoch trotzdem nicht, weshalb er dann das Eltern Element (grüne Box) verschiebt und nicht einfach das innerhalb der grünen Box.

Wenn Du den Margin nicht haben willst, dann musst Du ihn halt
in Deinem CSS zurücksetzen: p{margin: 0;}

Der Abstand für die s ist ja generell eigentlich erwünscht! Nur eben für den ersten nicht, wegen dieses Problems.
Ich könnte natürlich das erste auf margin 0 setzen, aber das erscheint mir irgendwie nicht die „richtige“ Lösung zu sein.

Gruß Christoph

Danke für den Link, diese collapsing margins werde ich mir mal genauer ansehen.

P.S.: Dass Dein HTML-Code aber auch weltfremd und semantischer
Unsinn ist, weißt Du ja sicher.

Worauf willst du hinaus?

Gruß Christoph

Okay, dann eben ein margin - ich verstehe jedoch trotzdem
nicht, weshalb er dann das Eltern Element (grüne Box)
verschiebt und nicht einfach das innerhalb der grünen Box.

Das Elternelement wird doch nicht verschoben (relativ zu was?), sondern die Größe wird angepasst. Der Paragraph folgt auf das Öffnen des DIV-Containers mit den vorgegebenen Werten (Padding DIV, Margin P, der Inhalt dann mit Padding P)

Wenn Du den Margin nicht haben willst, dann musst Du ihn halt
in Deinem CSS zurücksetzen: p{margin: 0;}

Der Abstand für die s ist ja generell eigentlich erwünscht!

Welcher Abstand? Margin? Padding?

Nur eben für den ersten nicht, wegen dieses Problems.

Vielleicht schilderst Du einfach Mal genau, was Du erreichen möchtest, ganz ohne irgendwelches CSS oder HTML. Wie Efchen schon anmerkte sieht das semantisch nicht schlau aus und ist für das gewünschte Ergebnis der völlig falsche Weg.

Ich könnte natürlich das erste auf margin 0 setzen, aber
das erscheint mir irgendwie nicht die „richtige“ Lösung zu
sein.

Für eine Lösung brauchts halt auch ein Problem. Nur Elemente zu schachteln ist kein Problem, sondern ohne Aufgabe unnütz.

Gruß

osmodius

Okay, dann eben ein margin - ich verstehe jedoch trotzdem
nicht, weshalb er dann das Eltern Element (grüne Box)
verschiebt und nicht einfach das innerhalb der grünen Box.

Weil per Definition ein Außenabstand außen liegen soll, vermute ich.
Es geht ja hier nicht um Verständnis oder Sinn, sondern einfach, wie das festgelegt ist. Die meisten Anfänger verstehen auch nicht, warum im Box Model die Größe eines Elements nicht allein durch width und height festgelegt werden. Aber das muss man auch nicht verstehen, man muss es nur akzeptieren, dass die Spezifikation das so vorsieht.

Der Abstand für die s ist ja generell eigentlich erwünscht!
Nur eben für den ersten nicht, wegen dieses Problems.

Was ja wohl kein Problem ist, sondern eine Definition.

Ich könnte natürlich das erste auf margin 0 setzen, aber
das erscheint mir irgendwie nicht die „richtige“ Lösung zu
sein.

Für Dein Verständnis nicht, aber das wäre wohl konform mit der Spezifikation.

Liebe Grüße,
-Efchen

P.S.: Dass Dein HTML-Code aber auch weltfremd und semantischer
Unsinn ist, weißt Du ja sicher.

Worauf willst du hinaus?

Naja, welchen Sinn soll der HTML-Code denn machen?

Du definierst eine Gruppe mit der ID „wrapper“. Soweit so gut, die Gruppe beinhaltet zwei Elemente, das ist eine Gruppe, ist also prinzipiell semantisch in Ordnung.

Dann aber hast Du eine Gruppe mit der ID „oben“ (wo der Name schon schlecht gewählt ist, wenn Du das Element mal woanders haben willst - Trennung von Inhalt und Layout funktioniert auch bei Klassen- und ID-Bezeichnungen sehr gut!). Diese Gruppe beinhaltet aber nur Text. Das ist erstmal Unfug, weil Text nicht als Gruppe ausgezeichnet wird, sondern in einen Textabsatz gehört und zum anderen div#oben keine Gruppe ist, weil da nicht mindestens zwei Elemente drin sind.

Die dritte Gruppe in Deinem Code (div#unten, Namensvergabe s.o.) enthält auch nur ein Element, was man im Allgemeinen nicht als Gruppe bezeichnet. Das div hat hier keine wirkliche Existenzberechtigung.

Allein vom Inhalt her (und darum gehts ja bei HTML, das wird in Abhängigkeit vom Inhalt geschrieben und hat primär nichts mit dem Aussehen oder gar dem Layout zu tun) sind das zwei Textabsätze und deswegen bräuchte es auch nur zweimal das Tag p und kein einziges div.

Und weil der HTML-Code semantisch eher Unsinn ist, ist das Beispiel auch eher schlecht. In anständigen Seiten wird der Code so wie Du ihn da geschrieben hast, nicht vorkommen. Und wenn er semantisch einwandfrei ist, dann kommt das Problem so womöglich gar nicht mehr vor.

Darauf wollte ich hinaus. Du weißt, wozu HTML da ist? Was man unter „Semantik“ versteht?

Liebe Grüße,
-Efchen

Gelöst: Auswirkung von Padding auf Eltern Element
Hallo!

Im weiteren Verlauf der Entwicklung löste sich das Problem quasi von selbst :smile:
Das Beispiel war in der Tat unglücklich erstellt, da es, wie hier schon richtig erkannt, auf „anständigen“ Seiten so nicht vokommen kann.

Das war übrigens eine bemerkenswert detaillierte Analyse dieses HTML Schnipsels :wink:

Vielen Dank für die Antworten!
Gruß Christoph

Das Elternelement wird doch nicht verschoben (relativ zu
was?), sondern die Größe wird angepasst.)

Und genau das tut es ja im Beispiel eben nicht. Die grüne box wird relativ zur blauen nach unten verschoben.
Aber wie im „Gelöst“ Post bereits gesagt, das Ganze hat sich erledigt!

Danke für die Antworten!
Gruß Christoph

Moin,

Das war übrigens eine bemerkenswert detaillierte Analyse
dieses HTML Schnipsels :wink:

Nichts anderes erwarten alle hier von mir :wink:

Ich freue mich, dass Du meinen Kommentar dazu annimmst und das nicht als negativ auffasst.

Liebe Grüße,
-Efchen