Yuval Karmi
Yuval Karmi

Reputation: 26713

Browser interpreting line breaks in code as spaces (HTML)

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!

Upvotes: 1

Views: 1069

Answers (2)

Jim
Jim

Reputation: 5617

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

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

Upvotes: 3

Otto Allmendinger
Otto Allmendinger

Reputation: 28268

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

Upvotes: 1

Related Questions