Removing the Space Between Images using Only CSS

by kirupa   |   10 September 2012

  Have questions? Discuss this HTML5 / CSS3 tutorial with others on the forums.

Unlike the kind of packaging Amazon is encouraging manufacturers to use, HTML is not frustration free. One of the most frustrating things that I ran into recently revolved around a mysterious space that appeared when I was arranging images inside a container.

Below is an example of what I was seeing:

Notice the small gap between all of the images. From my point of view, I wasn't doing anything wrong. The HTML for these images simply looked as follows:

<div id="main">
	<img height="100" src="images/wrap1.png" width="100">
	<img height="100" src="images/wrap2.png" width="100">
	<img height="100" src="images/wrap3.png" width="100">
	<img height="100" src="images/wrap4.png" width="100">
	<img height="100" src="images/wrap5.png" width="100">
	<img height="100" src="images/wrap6.png" width="100">
	<img height="100" src="images/wrap7.png" width="100">
</div>

Looks pretty straightforward right? Despite how simple things looked, no amount of fiddling with margins, paddings, line-heights, etc. was able to make the space between these images go away. Just before I was going to throw in the towel and offer a sacrificial ham and cheese sandwich to the HTML gods, I stumbled upon the excellently written Images, Tables, and Mysterious Gaps article.

In this short article, I will extract only the relevant pieces from that article and address the immediate issue of how to remove the spacing between these images.

Why There is a Space (and a Really Awkward Solution)

The reason you are seeing a space between the images is quite bizarre yet logical once you realize the mistake. Notice how the HTML for showing my images is defined:

<img height="100" src="images/wrap1.png" width="100">
<img height="100" src="images/wrap2.png" width="100">
<img height="100" src="images/wrap3.png" width="100">
<img height="100" src="images/wrap4.png" width="100">
<img height="100" src="images/wrap5.png" width="100">
<img height="100" src="images/wrap6.png" width="100">
<img height="100" src="images/wrap7.png" width="100">

By having each tag appear in its own line, I'm actually inserting a space between each element. The solution is to not have this space exist. There are several ways of doing that....such as putting all of these tags in their own line:

<img height="100" src="images/wrap1.png" width="100"><img height="100" src="images/wrap2.png" width="100"><img height="100" src="images/wrap3.png" width="100"><img height="100" src="images/wrap4.png" width="100"><img height="100" src="images/wrap5.png" width="100"><img height="100" src="images/wrap6.png" width="100"><img height="100" src="images/wrap7.png" width="100">

This results in something that looks as follows:

There is a gap between each row of images as well. This gap can be removed by setting the line height on the parent container housing these images to 0:

#main {
	height: 330px;
	width: 350px;
	line-height: 0;
}

Doing this results in your images looking as follows:

That is the end result that we want, but unfortunately, this isn't the way to get it. Modifying how you structure your HTML and setting the line-height property doesn't translate into something whose motivation is easily decipherable. Instead, let's look at an easier, better solution in the next section.

A Better Solution

The better solution truly is worthy of being called better. Specify a style rule with float: left that affects all of your images is all it takes:

#main img {
	float: left;
}

In my case, all of my images are inside a container whose id value is #main. That is why selector looks the way it does. You should modify your selector to suit your particular needs.

With that said, that's all it takes to remove the spaces from all sides of your images. The reason this works is because of what the float property actually does. It specifies that all of the elements wrap to the right of the elements that have been floated left. Pretty simple, right?

You can see an example of this by looking at the following page.

Getting Help

If you have questions, need some assistance on this topic, or just want to chat - post in the comments below or drop by our friendly forums (where you have a lot more formatting options) and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out

Share

Did you enjoy reading this and found it useful? If so, please share it with your friends:

If you didn't like it, I always like to hear how I can do better next time. Please feel free to contact me directly via e-mail, facebook, or twitter.

Kirupa Chinnathambi
I like to talk a lot - A WHOLE LOT. When I'm not talking, I've been known to write the occasional English word. You can learn more about me by going here.

Add Your Comment (or post on the Forums)

blog comments powered by Disqus

Awesome and high-performance web hosting!
BACK TO TOP
new books - yay!!!