Vielleicht stehe ich gerad auch einfach nur tierisch auf dem Schlauch.
Ich habe mal ein kleines HTML Dokument erstellt, das mein Problem darstellen soll.
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?
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.
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.
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.
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.
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?
Gelöst: Auswirkung von Padding auf Eltern Element
Hallo!
Im weiteren Verlauf der Entwicklung löste sich das Problem quasi von selbst
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
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!
