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

[Rolf B]

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.

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

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

Wenn Du 8 Quadrate in 4 Reihen anordnen willst, und jedes Quadrat 50% der Bildschirmbreite haben soll, kannst Du ein Grid mit einem Column-Template von 1fr 1fr verwenden, oder eine Flexbox mit Wrap. Allerdings sieht das dann im Querformat mutmaßlich nicht so aus wie Du willst. Aber da kannst Du ggf. mit @media (orientation: landscape) { ... } etwas erreichen.

Rolf