Spaces Between Images in HTML

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 as a tutorial since example code is given.

How to Remove Small Spaces Between Images on a Web Page

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. For tips on copying code from the Tek Eye tutorials see Copying Code from the Articles.

A Basic Web Page with Two Images

This is some basic code for a web page with two images:

<!DOCTYPE html>
<head>
</head>
<body>
    <img src="https://tekeye.uk/html/images/Mona_Lisa-Leonardo_da_Vinci.png"/>
    <img src="https://tekeye.uk/html/images/The_Girl_With_The_Pearl_Earring-Johannes_Vermeer.png"/>
</body>
</html>

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

Space shown between HTML images

The space is due to the way that HTML is designed to handle whitespace. Although the full whitespace handling rules are complex, in most cases it is simply that 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.

Simple Solutions

There are several simple solutions to remove the whitespace, lets start with the most obvious.

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:

<img src="pic1.jpg"/><img src="pic2.jpg"/>

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 image's mark-up is moved to the line of the next image element:

<img src="pic1.jpg"/
><img src="pic2.jpg"/>

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:

<img src="pic1.jpg"/><!--
--><img src="pic2.jpg">

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:

<img style="float:left;" src="pic1.jpg"/>
<img style="float:left;" src="pic2.jpg"/>

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

<p style="clear:left;">Text</p>

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:

<div style="font-size:0;">
    <img src="pic1.jpg"/>
    <img src="pic2.jpg"/>
</div>

Remember no other text in the div is seen either.

Result of All Solutions

HTML Images With No Space

See the problem and solution in action on the Spaces Between Images Demo HTML page.

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.