is supported in part by

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.
  <title>Image Grid Example</title>
  <style type="text/css">
  .row {
  body {
    background-color: #000000;

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

  <div class="row">
  <img src="tile_4.gif"
  /><img src="tile_5.gif"
  /><img src="tile_6.gif"/>
  <div class="row">
  <img src="tile_7.gif"
  /><img src="tile_8.gif"
  /><img src="tile_9.gif"/>
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