moockblog: Removing spaces between images in HTML

August 30, 2011

Removing spaces between images in HTML

The following code shows how to use HTML to align a grid of images in rows and columns without tables, with no spaces or gaps between the images.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Image Grid Example</title>
  <!--CSS-->
  <style type="text/css">
  .row {
    line-height:0;
  }
  body {
    background-color: #000000;
  }
  </style>
</head>

<body>
  <div class="row">
  <img src="tile_1.gif" 
  /><img src="tile_2.gif"
  /><img src="tile_3.gif"/>
  </div>

  <div class="row">
  <img src="tile_4.gif"
  /><img src="tile_5.gif"
  /><img src="tile_6.gif"/>
  </div>
  
  <div class="row">
  <img src="tile_7.gif"
  /><img src="tile_8.gif"
  /><img src="tile_9.gif"/>
  </div>
</body>
</html>

There are two somewhat unintuitive techniques required to remove the spaces between the images:

There must be no space between the <img> tags. For example, the following code causes an unwanted gap between tile_1 and tile_2:
<img src="tile_1.gif"/> <img src="tile_2.gif"/>
The images must be placed inside a <div> element with the CSS style line-height set to 0

Here is a working demo. Posted by moock at August 30, 2011 12:34 PM