moin,
ich habe eine ganz einfache Frage. Wenn ich in HTML folgenden Code habe:

HTML-Code:

<img src="navigation_d.gif" alt="D"/>

<img src="navigation_e.gif" alt="E"/>

Werden die beiden Bilder mit einem Abstand dazwischen angezeigt. Beide Bilder sollen aber genau nebeneinander liegen. Daher muss ich den Code in HTML so schreiben:

HTML-Code:

<img src="navigation_d.gif" alt="D"/><img src="navigation_e.gif" alt="E"/>

Das ist aber bei einem Alphabet irgendwann sehr unübersichtlich. Muss ich den Bildern nun CSS-Styles zuweisen, die extra keinen margin haben oder was ist hier los?

Der Browser interpretiert die "Whitespaces" (Zeilenumbrüche, Tab-Einrückungen) im HTML-Code vor / hinter dem Inline-Element <img>.

Deiner Vorstellung kommt in diesem Fall die CSS-Eigenschaft float (left o. right) entgegen, um die Lücke im Textfluß zu schliessen.

Code css:

1	img.alphabet { float:left; }

Code xhtml:

1 2 3

<img src="navigation_d.gif" alt="D" class="alphabet" />   <img src="navigation_e.gif" alt="E" class="alphabet"/>