I am trying to put images next to each other on a webpage. Here is my HTML:

<img class="pt" src="Yellow Tulip.jpg" title="Yellow Tulip" alt="Yellow Tulip" />
<img class="pt" src="Pink Tulip.jpg" title="Pink Tulip" alt="Pink Tulip" />
<img class="pt" src="Purple Tulip.jpg" title="Purple Tulip" alt="Purple Tulip" />

However, on my webpage, this shows a gap between each image. I've noticed that once I remove the return line that makes the elements separate and readable and instead just put all the elements on one line, the gaps go away.

<img class="pt" src="Yellow Tulip.jpg" title="Yellow Tulip" alt="Yellow Tulip" /><img class="pt" src="Pink Tulip.jpg" title="Pink Tulip" alt="Pink Tulip" /><img class="pt" src="Purple Tulip.jpg" title="Purple Tulip" alt="Purple Tulip" />

Is there anyway I can achieve the output of the latter but still have the code/input look like the former? I really like the readability that the return lines (enter spaces) bring to the code, but I don't want the whitespace it creates on the actual page. If someone could explain why this is and/or how to fix it, I'd be really grateful! :)