Ruby on Rails or programmatically generated <span> or <img>, each on a line, causing spaces in between when displayed

Question

When using Ruby on Rails or other framework, a lot of time we generate <span> or <img> in a loop, and each line will be on a new line.

So when it is rendered in HTML, there will be extra space between those inline elements.

How can it be solved? Must they be made into 1 long line, or solvable using HTML or CSS?

Answer 1

The whitespace is treated as a space character by the browser resulting in the gap. You could:

1) render it onto 1 long line with no gaps between the elements; or 2) apply float: left to the elements so they sit flush up against each other

Answer 2

If you're using HAML, you probably want to use < and > to control whitespace:

HAML Docs on Whitespace Removal