Warum rendert der Browser eine neue Zeile als Leerzeichen?

74

Am längsten wollte ich verstehen, warum der Browser einen leeren Bereich zwischen gerenderten HTML-Elementen hinzufügt, wenn sich zwischen ihnen eine NewLine befindet, zum Beispiel:

<span>Hello</span><span>World</span>

Der obige HTML-Code gibt die Zeichenfolge "HelloWorld" ohne Leerzeichen zwischen "Hello" und "World" aus, jedoch im folgenden Beispiel:

<span>Hello</span>
<span>World</span>

Der obige HTML-Code gibt eine Zeichenfolge "Hello World" mit einem Leerzeichen zwischen "Hello" und "World" aus.

Nun, ich habe kein Problem damit zu akzeptieren, dass dies genau die Art und Weise ist, wie es funktioniert, aber das, was mich ein wenig nervt, ist, dass ich immer den Eindruck hatte, dass Leerzeichen (oder Zeilenumbrüche) zwischen den HTML-Elementen zu dem Zeitpunkt keine Rolle spielen würden Der Browser hat das HTML für den Benutzer gerendert.

Meine Frage ist also, ob jemand weiß, was der philosophische oder technische Grund für dieses Verhalten ist.

Vielen Dank.

html Rene
quelle

Antworten:

73

Browser verdichten beim Rendern mehrere Leerzeichen (einschließlich Zeilenumbrüche) zu einem einzigen Leerzeichen. Die einzige Ausnahme besteht innerhalb von <pre>Elementen oder solchen, für die die CSS-Eigenschaftwhite-space festgelegt preoder pre-wrapfestgelegt ist. (Oder in XHTML das xml:space="preserve"Attribut.)

David Z.
quelle
1
oderwhite-space: pre-line;
Andrew Evt
@AndrewEvt Soweit ich das beurteilen kann, werden pre-lineimmer noch mehrere Leerzeichen reduziert, mit Ausnahme von Zeilenumbrüchen. Ihr Kommentar hat mich jedoch dazu gebracht, ihn zu finden pre-wrap.
David Z
55

Leerzeichen zwischen Blockelementen werden ignoriert. Leerzeichen zwischen Inline-Elementen werden jedoch in ein Leerzeichen umgewandelt. Der Grund dafür ist, dass Inline-Elemente möglicherweise mit dem regulären inneren Text des übergeordneten Elements durchsetzt sind.

Betrachten Sie das folgende Beispiel:

<p>This is my colored <span class="red_text">Hello</span> <span class="blue_text">World</span> example</p>

Im Idealfall soll der Benutzer sehen

This is my colored Hello World example

Das Entfernen des Leerzeichens zwischen den beiden Bereichen würde jedoch zu folgenden Ergebnissen führen:

This is my colored HelloWorld example

Das gleiche Beispiel kann jedoch von einem Autor (mit OCD über die HTML-Formatierung :-)) wie folgt umgeschrieben werden:

<p>
  This is my colored
  <span class="red_text">Hello</span>
  <span class="blue_text">World</span>
  example
</p>

Es wäre besser, wenn dies mit dem vorherigen Beispiel übereinstimmen würde.

Franci Penov
quelle
Ich bin gerade darauf gestoßen, als ich vor dem gleichen Problem stehe. Schöne, erklärende Antwort. Es wäre schön, wenn Browser unabhängig von der neuen Zeile einen Abstand zwischen den Bereichen im obigen Beispiel benötigen würden. Ich weiß, dass es dann möglicherweise Probleme mit Texteditoren wie Sublime gibt, mit denen Leerzeichen gekürzt werden können, aber das wäre für mich sinnvoller. Könnte dies nicht auf den Doctype (Übergang, Zeichenfolge usw.) zurückzuführen sein? Ich meine, wir hosten eine Reihe von Websites, die das gleiche Markup verwenden, aber ich bemerke die Leerzeichen auf einigen Websites viel häufiger als auf anderen. Ich werde das im Auge behalten, falls der Doctype der Grund ist.
ClarkeyBoy
5

Sie können das HTML-Kommentar-Tag verwenden, um den Code zu verbinden und Platz zu vermeiden.

<p>
  This is my
  <span class="red_text">Hello</span><!--
  --><span class="blue_text">World</span>
  example
</p>
Zhang Qun
quelle
3

Wenn Sie das Zeichen 'a' zwischen zwei Tags hätten, würden Sie erwarten, dass es gerendert wird. In diesem Fall haben Sie ein Zeichen '\ n' zwischen zwei Tags. Das Verhalten ist analog und konsistent ('\ n' wird als einzelnes Leerzeichen gerendert).

SquareCog
quelle
-2

Browser machen hier einen Fehler:

http://www.w3.org/TR/html4/appendix/notes.html#hB.3.1

SGML (siehe [ISO8879], Abschnitt 7.6.1) gibt an, dass ein Zeilenumbruch unmittelbar nach einem Start-Tag ignoriert werden muss, ebenso wie ein Zeilenumbruch unmittelbar vor einem End-Tag. Dies gilt ausnahmslos für alle HTML-Elemente.

Thomas Müller
quelle
7
Nein, Sie machen hier einen Fehler: Der Zeilenumbruch im OP-Beispiel steht nach dem End-Tag!
Tim Pietzcker