Spaces Between Images in HTML

How to Remove the Small Spaces Between Images on a Web Page

This article deals with removing the small strips of space that can appear between two pictures placed onto a web page. It is easy to fix and you can use this article like a tutorial as example code is given.

A Basic Web Page with Two Images

A web page can be created in a simple text editor program, on a Windows PC the Notepad program under Accessories can be used, or better still a program like Notepad++ which provides color coding to help with the editing process. This is some basic code for a web page with two images:

The above code produces this web page that clearly shows a gap between the two images:

Space shown between HTML images

The reason for this space is due to the way that HTML is designed to handle whitespace. Although the full whitespace handling rules are not straightforward in most instances it is simply any combination and any number of spaces, tabs, carriage returns and line feeds are reduced to a single space. You can try it out on a Live DOM Viewer and read more about it here:

Live DOM Viewer Whitespace Example

For our example page we put the two image elements on separate lines. This added a carriage return to the file, which gets turned into the single space. There are several simple solutions.

Keep All Image Elements on One Line

The simplest solution is to have the image elements on one line with nothing between the closing angle bracket of one image element and the opening angle bracket of the next, like this:

However, that can make our HTML source code difficult to read when you have many images or long src strings.

Put the Closing Bracket on the Next Line

The closing bracket for the first images mark-up is moved to the line where next image element is added:

This is easy if you can remember to do it while entering the HTML. Some find it ugly or do not like to split the line between brackets. It is also difficult to achieve with visual editors which tend to reformat the HTML entered by hand.

Comment Out the Carriage Return

Us the comment tags to blank out the whitespace:

Again some do not like the way it looks.

Style with float:left

You can use Cascading Style Sheets (CSS) to add float:left to the images:

This will also remove the default descender spacing. If you do this you may need to add clear:left if you have following elements:

Reduce Text Size to Zero

Because the gap between the images is the space character setting the font size to zero in the images container also works. This can be done by wrapping the images in a div:

Remember no other text in the div is seen either.

Summary

To remove the unwanted space between images or similar HTML elements do one of the following:

  • Put all the elements on one line with no spaces between them.
  • Put the closing bracket of the previous element immediately before the next element on the next line.
  • Comment out the end of line marker (carriage return).
  • Style with float:left, then clear:left on the next element.
  • Wrap in a div and set the text size of the div to zero with font-size:0.

HTML Images With No Space

One thought on “Spaces Between Images in HTML

  1. Pingback: HTML Image Scroller Carousel Example | Tek Eye

Leave a Reply

Your email address will not be published. Required fields are marked *

Human Verification: In order to verify that you are a human and not a spam bot, please enter the answer into the following box below based on the instructions contained in the graphic.