Zeilenumbruch im HTML-Code verursacht Leerzeichen und Zeilenabstand

[Gunnar Bittersmann]

@@Rolf ẞ

okay, das Problem ist auf die inline-Darstellung beschränkt. Wenn ich aus Gründen der Übersicht Dinge untereinanderschreibe, und dieses Newline sich dann als Whitespace im Rendering wiederfindet, dann ist das erstmal störend.

<p>
Das glaube ich nicht. Es
wäre wohl (ver)störender,
wenn bei Zeilenumbrüchen
kein Leerzeichen gerendert
werden würde.
</p>

Mit display:flex kann man sich heute behelfen - früher, als HTML designed wurde, gab's das nicht.

Da gab’s noch nicht mal CSS.

Ich kann HTML nicht sagen: das ist echter Content, und das hier sind Inline-Elemente mit Zeilenumbrüchen dazwischen.

Wie hättest du’s gerne? Dass Zeilenumbrüche im Code nicht als Leerzeichen dargestellt werden?

Dann könntest du immer noch nicht durch Einrückungen Verschachtelungen sichtbar machen. Tabs im Code nicht als Leerzeichen dargestellt? Hm, das widerspricht wohl völlig dem Sinn von Tabs.

Außerdem hast du dann immer noch die ganzen Tab-Nicht-Versteher am Hals, die warum auch immer mit Leerzeichen einrücken wollen.

Statt dessen macht es alle Zeichen, die nicht in Elementen eingeschlossen sind, zu eigenständigen Text-Nodes

Solche Zeichen gibt es nicht. Alle Zeichen (die angezeigt werden sollen) sind in Elementen eingeschlossen – zumindest in html und body.

Es wäre andersrum auch recht lästig, explizit auszugebenden Content immer als <span> oder als <text> auszeichnen zu müssen.

Du sagst es. Außerdem müsstest du aufpassen:

<text>Himmel</text>
<text>Hölle</text>

Nichts dazwischen zwischen Himmel und Hölle? Du müsstest gewünschte Leerzeichen in die Elementinhalte tun …

Aber für diese Bequemlichkeit bezahlt man eben den Preis, dass man gelegentlich ein Whitespace gerendert bekommt, das man gar nicht haben will.

Wenn man Inline-Inhalte hat, dann will man das.

Und muss das dann irgendwie umgehen. Ein display:flex ist im gezeigten Fall vielleicht eine Lösung, aber nicht im Allgemeinen. Man muss für jedes konkrete Szenario einen neuen Workaround finden.

Wenn man Blöcke zu Inline-Inhalten macht, um sie nebeneinander zu bekommen – das ist der Hack! Und den kann (lies: sollte) man vermeiden. Mit Flexbox und Grid gibt es heute vernünftige Werkzeuge, sodass für solch alte Workarounds kein Bedarf mehr besteht. Das Problem unerwünschter Leerzeichen erfreut sich seiner Nichtexistenz.

LLAP 🖖