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="http://tekeye.uk/html/images/Mona_Lisa-Leonardo_da_Vinci.png"/> <img src="http://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:
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:
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 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:
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
See the problem and solution in action on the Spaces Between Images Demo HTML page.
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.
- For more HTML articles see HTML in the index.
- For a full list of all the articles in Tek Eye see the full site alphabetical Index.
Author:Daniel S. Fowler Published: Updated: