Space between images on page, but can’t find source in HTML/CSS

<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>

That’s the html code. The two images are supposed to appear next to each other on the same line without any white space in between them. My CSS is such that there is no margin or padding between those two inline images. Yet 3 pixels of white space appears between the two images.

Now, when I remove the line break in the HTML file:

<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>

The 3 pixels of white space goes away.

So I was thinking there might be a character encoding issue or something. But the HTML file is saved as UTF-8, and that is also what the page is defined to use:

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

Any thoughts on why the line break in the HTML code adds three pixels of white space between the images when viewed in browser? This has been observed in FireFox and Chrome on Mac OS X.

These files are part of a WordPress theme. But it was a theme I created from scratch, so the HTML and CSS is 100% known by me. It’s very simple. I don’t know if the PHP or WordPress is doing something weird. But my understanding of HTML tells me that adding the line break in the code shouldn’t add white space in the browser.