HTML- und CSS-Sheets strukturieren

[Rolf B]

Hallo Merlin,

grundsätzlich sind Leerzeichen, Tabs und Zeilenumbrüche "Weißraum" und werden vom vom CSS-Parser wie eine einzelne Leerstelle behandelt. Es gibt ein paar Ausnahmen, z.B. der String der content-Eigenschaft.

In HTML bleiben Weißraumzeichen zunächst erhalten und erzeugen einen Textknoten im DOM. Dieser Textknoten kann auf unterschiedliche Weise zur Anzeige kommen.

• Wenn das Elternelement Flow-Layout verwendet (display:inline oder display:block), wird er angezeigt
  • Wenn im Elternelement white-space:pre oder ähnliches gesetzt ist, wird er vollständig angezeigt
  • Andernfalls kollabiert er zu einer Leerstelle
• Wenn das Elternelement andere Layoutformen verwendet (Flexbox, Grid, Table), werden Weißraum-Textknoten nicht angezeigt.

Sowas kann durchaus merkwürdige Folgen haben. Ich habe vor ewigen Zeiten mal eine Webseite gemacht, da wurden Dokumente in einer Tabelle angezeigt und rechts in der Tabelle waren ein paar Buttons (Bearbeiten, Löschen, etc). Ja, ich weiß, heute würde man es anders lösen. Aber das war 2004 oder so.

Mein HTML sah irgendwie so aus:

<td>
  <input type="image" src="edit.jpg">
  <input type="image" src="delete.jpg">
</td>

Nur so als Prinzip. Die Buttons waren 24px breit, und Milchmädchen Rolf errechnte die Breite der Button-Spalte demzufolge als 48px. Und das ging schief. Die Buttons wurden untereinander angezeigt. Nach einiger Zeit (Entwickler-Tools gab's im IE4 nicht oder ich kannte die nicht, ich war noch jung und doof) kam ich drauf: weil zwischen den beiden Buttons Weißraum war, der als ein Space angezeigt wurde, brauchte ich mehr Platz. Ich hab's dann so gemacht, und es funktionierte:

<td>
   <input type="image" src="edit.jpg"><!--
--><input type="image" src="delete.jpg">
</td>

HEUTE lache ich drüber, man macht einfach keine Layouts mit dem Pixelschuhanzieher und wenn ich's UNBEDINGT wollte, würde ich die Tabellenzelle mit display:flex zur Flexbox machen. Aber 2004 gab's das nicht.

Naja. Was ich sagen wollte: Überschüssiger Weißraum im HTML kann fast immer ignoriert werden. Bis man an den Punkt kommt, wo er doch mal stört…

Rolf