1

I have placed 2 images side by side in a div besides input box "Search by Contact". In the browser I find there is a gap between the 2nd image(Button T) and the one on its left. I am unable to remove the gap. Any help is highly appreciated. Here is the link to the html page:
Space between button T and the one on its left.

Shivanand
  • 11,099
  • 5
  • 24
  • 31
  • This must be the question of the month, because I've seen it come up on several times between SO and some web design blogs I follow. – keithjgrant Apr 26 '10 at 15:55
  • Gosh, so many dupes: http://stackoverflow.com/questions/1931913/how-can-i-stop-the-new-line-from-adding-a-space-between-my-list-items-in-html, http://stackoverflow.com/questions/276324/css-horizontal-navigation-spacing, http://stackoverflow.com/questions/441279/firefox-3-adds-spacing-to-spans-with-displayinline-block... – David Thomas Apr 26 '10 at 17:31

2 Answers2

4

There is white space between the images in the HTML code and since images are in-line elements (similar to text), there will be white space on the rendered page.

RoToRa
  • 37,635
  • 12
  • 69
  • 105
  • 2
    There is a line break and a line break is white space. – RoToRa Apr 26 '10 at 16:01
  • To add to the explanation: white space is collapsed into a single space by default - for all content except content inside a `pre` tag. – ANeves Apr 26 '10 at 16:05
0

Trying setting the style on your links to have margin-right:0px, e.g.

<a href="#" style="margin-right: 0px"><img ... ></a>

(It would of course be preferable to do this using a CSS class...)

brahn
  • 12,096
  • 11
  • 39
  • 49