Platz zwischen den Bildern auf der Seite, kann aber keine Quelle in HTML/CSS finden

Question

<div id="head-ads"> 

    <img id="ad-home-head-1" src="images/blank-ad.png" /> 
    <img id="ad-home-head-2" src="images/blank-ad.png" /> 

</div> 

Das ist der HTML-Code. Die beiden Bilder sollen nebeneinander auf der gleichen Linie ohne Zwischenräume erscheinen. Mein CSS ist so beschaffen, dass zwischen diesen beiden Inline-Bildern kein Rand oder Abstand vorhanden ist. Zwischen den beiden Bildern erscheinen jedoch 3 Pixel Leerraum.

Nun, wenn ich den Zeilenumbruch in der HTML-Datei zu entfernen:

<div id="head-ads"> 

    <img id="ad-home-head-1" src="images/blank-ad.png" /><img id="ad-home-head-2" src="images/blank-ad.png" /> 

</div> 

Die 3 Pixel des weißen Raumes geht weg.

Also dachte ich, es könnte ein Zeichencodierungsproblem oder etwas sein. Aber die HTML-Datei als UTF-8 gespeichert, und das ist auch das, was die Seite zu benutzen ist definiert:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 

Irgendwelche Gedanken darüber, warum der Zeilenumbruch in dem HTML-Code fügt drei Pixel Leerraum zwischen den Bildern wenn im Browser angezeigt? Dies wurde in FireFox und Chrome unter Mac OS X beobachtet.

Diese Dateien sind Teil eines WordPress Theme. Aber es war ein Thema, das ich von Grund auf neu kreiert habe, also sind HTML und CSS zu 100% von mir bekannt. Es ist sehr einfach. Ich weiß nicht, ob das PHP oder WordPress etwas Seltsames macht. Aber mein Verständnis von HTML sagt mir, dass das Hinzufügen des Zeilenumbrüchens im Code keinen Leerraum im Browser hinzufügen sollte.

Answer 1

schreiben font-size:0 in #head-ads DIV. Schreiben wie folgt aus:

#head-ads{ 
font-size:0; 
} 
img{ 
vertical-align:top; 
} 

Answer 2

versuchen

#head-ads img { 
    border: 0; 
    display: block; 
    margin: 0; 
    padding: 0; 
    float: left; 
} 

auch sicherstellen, dass kein Platz mehr gibt es in den Bildern selbst