YannToberen: Zeilenumbruch im HTML-Code verursacht Leerzeichen und Zeilenabstand

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

  1. 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

    1. 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

      --
      Dosen sind silbern
      1. 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

        1. 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

          --
          Dosen sind silbern
          1. @@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:

            „Himmel“ auf himmelblau, „Hölle“ auf rot, untereinander, kein Abstand zwischen den Boxen

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

            #Himmel, #Hoelle { display: inline }
            

            „Himmel“ auf himmelblau, „Hölle“ auf rot, nebeneinander, mit Abstand zwischen den Boxen

            Und wie MrMurphy1 schon sagte, verschwindet der bspw. mit

            #HimmelUndHoelle { display: flex }
            

            „Himmel“ auf himmelblau, „Hölle“ auf rot, nebeneinander, kein Abstand zwischen den Boxen

            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 🖖

            --
            “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
            1. 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

              --
              Dosen sind silbern
              1. @@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 🖖

                --
                “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    2. 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

      1. 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

        --
        Rosen sind rot.
  2. 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