Browser interpreting line breaks in code as spaces (HTML)

Question

I have 6 images sized 50x50 that are supposed to fit in a 300px div (50 * 6 = 300). In my code I write them as follows:

<img src="foo.png" />
<img src="foo.png" />
<img src="foo.png" />
<img src="foo.png" />
<img src="foo.png" />
<img src="foo.png" />

Note the line breaks in between the image tags. I write them that way for clarity. The problem is that when I test the page in a browser - the images do not fit, because the browser adds a space for every line break so I end up with something like this:

[img][space][img][space][img][space][img][space][img][space][img][space]

instead of:

[img][img][img][img][img][img]

I can easily remove the line breaks from my html, but that makes my code a lot less readable. I am working in Ruby on Rails 2.3 - if there's a helper function for stripping out whitespace, I don't mind using that.

I was wondering if anybody knows how I can avoid this.

Thanks!

Answer 1

Put your images in a <div class="images"> and set your css rules to div.images img { float: left }.

Answer 2

If you're using the image_tag helper, you can do

<%= image_tag('foo.png') -%> <%= image_tag('foo.png') -%>

the -%> will not include the spaces in output.