Umbruch in Quelltext macht Boxlayout kaputt

[Axel Richter]

Hallo,

Und jetzt das eigentliche Problem:
Sobald die beiden <img>-Tags für "Foto" und "Logo" eingerückt (Zeilenumbruch, Tabs) werden entsteht zwischen den beiden Bildern bei der Darstellung ein Leerzeichen, welches mir die gesamte Darstellung kaputt macht.

<div id="hintergrund">
<img src="img/foto_01.jpg" alt="" title="" width="530" height="120" />
<img src="img/logo_topright.png" alt="" title="" style="padding-left:45px;" width="250" height="120" />
<!-- Geht kaputt. -->
...
</div>

Schreibe ich die beiden Bildelemente, bei denen es auf genaue Positionierung ankommt in einer Quelltextzeile direkt hintereinander, dann entsteht kein störendes Leerzeichen und alles ist haargenau so, wie es sein sollte.    |"FOTO" (45px Platz) "Logo"|

<div id="hintergrund">
<img src="img/foto_01.jpg" alt="" title="" width="530" height="120" /><img src="img/logo_topright.png" alt="" title="" style="padding-left:45px;" width="250" height="120" />
<!-- klappt vorzüglich -->
...
</div>

was übersehe ich?

Die Bilder stehen im Inline-Kontext, genau wie Textzeichen z.B. in :

  
<p>Test</p>  

Hier stehen die Zeichen unmittelbar hintereinander.

Schreibst Du:

  
<p>Te  
st</p>  

wird auch hier die Ausgabe

Te st

sein. Jeglicher white-space zwischen Inline-Inhalt, auch Zeilenumbrüche, werden in HTML als _ein_ Leerzeichen dargestellt. Das Selbe trifft auf Deine Bilder zu.

Entweder, Du lässt die Bilder also unmittelbar aneinader stoßen, oder Du nimmst sie aus dem Inline-Kontext und positionierst sie entsprechend dem gewünschten Aussehen.

viele Grüße

Axel