(1) whitespace im Quelltext verändert Rendering; (2) box höher als img.

[michaah]

Hallo michaah,

das Problem ist die inline-Formatierung. Deine Quadrate sind inline-block, d.h. nach außen hin inline-Elemente. Beim Formatieren von inline-Elementen wird white-space nicht eliminiert.

Danke.

Ok, das ist vor Allem eine Erklärung, die a) nachvollziehbar ist und b) schon auch Sinn macht. Zudem steht es nicht grundsätzlich einer Strukturierung des html im Weg. Es heißt allerdings doch, dass so manches Abstandsproblem durch strukturierenden whitespace verursacht wird den man nicht so einfach entdeckt ...

Wenn Du ein Layout brauchst, bei dem Whitespace wegfällt, brauchst Du sehr wahrscheinlich etwas wie Flexbox oder Grid.

Naja, oder ich klebe den Kram ohne whitespace wie gezeigt aneinander. Ich hatte mir Grid angeschaut, aber da schwirrt mir immer noch der Kopf und es ist nach wie vor mehr try and error als dass ich verstünde wie das detail für detail zusammenwirkt.

Um Dir näheres raten zu können, müsste man deine Seite genauer kennen.

Das wäre zwar sicherlich das einfachste, aber ich kann, will und werde nicht meine Unzulänglichkeiten besprechen im Zusammenhang mit dem Inhalt und der URL des Auftraggebers. Das geht einfach nicht. Wenn es gar nicht anders geht baue ich das halt nach ... nur das kostet auch Zeit und Energie. So mache ich das halt wie es mir vermittelbar erscheint.

Ich will 4 Quadrate je nach viewport entweder als 4x1 Quadrat in einer Spalte oder als 2 Reihen mit je 2 Quadraten darstellen. Ganz vielleicht auch als Reihe mit 4 Quadraten nebeneinander.

An sich tut es ja mein code, vor allem klappt das auch mit der Skalierung, das whitespace Problem war nicht was mich vorrangig genervt hatte, sondern das Problem, dass das aside höher als breit ausfällt und daher ein Zusatzabstand nach unten entsteht. Und da hätte ich gerne verstanden wie ich dies verhindern kann. Das war der Ausgangspunkt der Untersucheung ... Das scheint ja kein whitespace Problem zu sein. Hast du dafür eine Erklärung?