Zeilenumbruch im HTML-Code verursacht Leerzeichen und Zeilenabstand
bearbeitet von Gunnar Bittersmann@@Rolf b
> Das Problem ist, dass Whitespace zwischen zwei Tags als Content gesehen und gerendert wird.
Kann man so nicht sagen.
~~~HTML
<div id="HimmelUndHoelle">
<div id="Himmel">Himmel</div>
<div id="Hoelle">Hölle</div>
</div>
~~~
~~~CSS
#Himmel { background: skyblue }
#Hoelle { background: red }
~~~
(Wieso gibt’s keine Farbangabe `hellred`?)
Zwischen Himmel und Hölle kann Whitespace stehen soviel wie will, da wird kein Zwischenraum zwischen den Boxen gerendert:
[![„Himmel“ auf himmelblau, „Hölle“ auf rot, untereinander, kein Abstand zwischen den Boxen](/images/877a4346-9c3a-4fe4-aff2-775e2ea690aa.png?size=medium)](/images/877a4346-9c3a-4fe4-aff2-775e2ea690aa.png)
Whitespace wird gerendert, wenn es sich um `inline`-/`inline-block`-Elemente handelt:
~~~CSS
#Himmel, #Hoelle { display: inline }
~~~
[![„Himmel“ auf himmelblau, „Hölle“ auf rot, nebeneinander, mit Abstand zwischen den Boxen](/images/e90f33e2-a682-40de-8d32-0a4da9199683.png?size=medium)](/images/e90f33e2-a682-40de-8d32-0a4da9199683.png)
Und wie MrMurphy1 schon sagte, verschwindet der bspw. mit
~~~CSS
#HimmelUndHoelle { display: flex }
~~~
[![„Himmel“ auf himmelblau, „Hölle“ auf rot, nebeneinander, kein Abstand zwischen den Boxen](/images/bb92c255-5953-4639-881f-4b64f095e1e0.png?size=medium)](/images/bb92c255-5953-4639-881f-4b64f095e1e0.png)
> D.h. eigentlich ist es diese Komfortfunktion von HTML, dass man Content nicht als solchen auszeichnen muss, die hier zum Problem wird.
Das verstehe ich nicht.
> Und es ist eigentlich blöd, dass man das mit Stylesheets ausgleichen muss. Einer von vielen Tradeoffs halt...
Warum sollte es blöd sein, die Darsetllung mit Stylesheets anzugeben?
LLAP 🖖
--
“When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)