Zeilenumbruch im HTML-Code verursacht Leerzeichen und Zeilenabstand

[YannToberen]

Hallo an alle,

ich hab eine Frage, auf die ich noch nichts im Netz gefunden habe.

Ich habe einen Code, der einfach nur eine große Menge an Bildern setzt.

Ich wollte jetzt das ganze etwas übersichtlicher gestalten, indem ich Zeilenumbrüche im Quellcode setze. Allerdings verursacht dieser Zeilenumbruch nachher auf der Website, dass ich ein Leerzeichen zwischen den Bildern bekomme, zwischen denen im Quellcode umgebrochen wurde, ganz zu Schweigen vom vollkommen unnötigen Zeilenabstand vor der Zeile.

Kann man das unterbinden?

Grüße,

Ralph

[MrMurphy1]

Hallo

Das Verhalten ist vollkommen normal und so vorgesehen.

Das kannst du durch entsprechende CSS-Anweisungen unterbinden, zum Beispiel mit Flexbox (display: flex;)

Gruss

MrMurphy

[Rolf b]

Hallo MrMurphy1,

hilft das grundsätzlich? Ich habe mir früher™️ (als flex noch von der spec träumte) schon einmal so beholfen, dass ich die HTML Tags "umgebrochen" habe, also sowas in dieser Art (natürlich fehlen noch ein paar nötige Attribute, und die Leerzeile nach pic1 kommt von Kramdown, nicht von mir):

<img src="example.com/pic1"

><img src="example.com/pic2"
><img src="example.com/pic3"
><img src="example.com/pic4"
><img src="example.com/pic5">

Ok, das muss noch IE3 oder 4 gewesen sein.

Rolf

[MrMurphy1]

Hallo

Das funktioniert immer noch.

Aber es macht den Quelltext nur teilweise lesbarer und viel schwieriger zu warten. Die Dateinamen sind in der Praxis zum Beispiel unterschiedlich lang. Teilweise sind die Datei- und Pfadnamen so lang dass im Quelltext im Editor Zeilenumbrüche entstehen. Da geht es ganz schnell daneben Bilder hinzuzufügen oder fehlerfrei zu löschen.

Zudem ist es nicht Aufgabe des HTML das Layout zu gestalten. Dafür gibt es doch grade CSS.

Gruss

MrMurphy

[Rolf b]

Hallo MrMurphy1,

es ging ja auch nicht darum, das Layout zu gestalten. Es ging darum, das Layout nicht zu verfremden. Das Problem ist, dass Whitespace zwischen zwei Tags als Content gesehen und gerendert wird. D.h. eigentlich ist es diese Komfortfunktion von HTML, dass man Content nicht als solchen auszeichnen muss, die hier zum Problem wird.

Und es ist eigentlich blöd, dass man das mit Stylesheets ausgleichen muss. Einer von vielen Tradeoffs halt...

Rolf

[Gunnar Bittersmann]

@@Rolf b

Das Problem ist, dass Whitespace zwischen zwei Tags als Content gesehen und gerendert wird.

Kann man so nicht sagen.

<div id="HimmelUndHoelle">
	<div id="Himmel">Himmel</div>

	<div id="Hoelle">Hölle</div>
</div>

#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:

Whitespace wird gerendert, wenn es sich um inline-/inline-block-Elemente handelt:

#Himmel, #Hoelle { display: inline }

Und wie MrMurphy1 schon sagte, verschwindet der bspw. mit

#HimmelUndHoelle { display: flex }

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 Darstellung mit Stylesheets anzugeben?

LLAP 🖖

[Rolf ẞ]

Hallo Gunnar,

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. Mit display:flex kann man sich heute behelfen - früher, als HTML designed wurde, gab's das nicht. Da musste man sichtbarere Tricks verwenden.

Ich kann HTML nicht sagen: das ist echter Content, und das hier sind Inline-Elemente mit Zeilenumbrüchen dazwischen. Statt dessen macht es alle Zeichen, die nicht in Elementen eingeschlossen sind, zu eigenständigen Text-Nodes (die ich allerdings im Chrome-DOM als Child von #HimmelUndHoelle nicht finde - um so schlimmer). Und im Inline-Betrieb rendert es die auch.

Es wäre andersrum auch recht lästig, explizit auszugebenden Content immer als <span> oder als <text> auszeichnen zu müssen. Aber für diese Bequemlichkeit bezahlt man eben den Preis, dass man gelegentlich ein Whitespace gerendert bekommt, das man gar nicht haben will. 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. Nach einem Leben mit HTML ist man dran gewöhnt und denkt nicht mehr drüber nach. Aber ein Quirk bleibt es. Und jeder, der mit HTML anfängt, stolpert irgendwann drüber...

Rolf

[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 🖖

[Nils-Hero]

Neben MrMurphy1´s flex-Lösung kannst auch float:left für die Bilder verwenden, oder für das umschließende Element font-size:0.

Gruß, Nils

[Matthias Apsel]

Hallo Nils-Hero,

oder für das umschließende Element font-size:0.

Das kann gefährlich sein, wenn irgendwelche weiteren Längenangaben in em getätigt werden.

Bis demnächst
Matthias

[Henry]

Hallo YannToberen,

Basierend auf einem ähnlichem (oder gleichem, ist ja kein Quelltext zu sehen), bereits gelösten, Problem in diesem Thread, hat MrMurphy eine Beispielseite mit verschiedenen Möglichkeiten eingerichtet.

Gruss
Henry