How to remove space between lines?

Question

I am trying to make an ascii map, and I have wrapped it in a div with the id "map". What CSS do I need to eliminate this whitespace between lines:

######
#00000#
#00000#
######

With bigger maps, it makes them appear much taller than they are wide. For example, that mini map is 6X4, but it looks like it is slightly taller than it is wide, not sagnificantly shorter, becuase of whitespace between lines. Is there any way to fix this?

Answer 1

This little bit of CSS should work for your problem.

div.map {
    line-height: 1em;
}

"1em" is the same as the font's height for the div, so even if you use a different-sized font, it will still pack the lines as closely as possible.

That leaves you with "just" the problem of picking the right font so that each character has the same width, but judging by the question you already know how to do it.

Answer 2

I think you want the CSS line-height property if I understand you correctly. You'll need to experiment with what value to set it to, though.