row of images evenly distributed - css

Question

I want a row of images evenly distributed and justified, after some research I've found this elegant method:
#container {
text-align: justify;
background-color: #FF0000;
}
#container img {
display: inline-block;
}
#container:after {
content: "";
width: 100%;
display: inline-block;
}
<div id="container">
<img src="http://placehold.it/150x100" />
<img src="http://placehold.it/100x150" />
<img src="http://placehold.it/250x50" />
<img src="http://placehold.it/150x150" />
</div>
See the result here: http://codepen.io/naio/pen/vbgrm
Why that little margin on the right?
How can I get rid of the empty space added below the images?

Answer 1

You can remove the bottom whitespace using the following adjustments to your CSS:
#container {
text-align: justify;
background-color: #FF0000;
line-height: 0;
}
#container img {
display: inline-block;
}
#container:after {
content: "";
width: 100%;
display: inline-block;
vertical-align: bottom;
}
The generated content from the pseudo-elememt (empty string) creates an inline box that has a height equal to the line height of the containing block (#container in this example).
By setting line-height: 0, this forces any inline boxes to shrink to zero height.
Footnote
In Chrome (and similar webkit browsers), you will see some extra space to the right of the right-most element on the line. This extra space is not seen in Firefox (where I tested the code).
The extra space is the result of the white space in the original HTML mark-up. The right-most element has a white space character (CR/LF) before the closing </div> tag and this generated content is placed after the white-space, which shows up in some browsers.
You can get rid of it by modifying the HTML as follows:
<div id="container">
<img src="http://placehold.it/150x100" />
<img src="http://placehold.it/100x150" />
<img src="http://placehold.it/250x50" />
<img src="http://placehold.it/150x150" /></div>
that is, keep the closing </div> tag right next to the final img tag.

Answer 2

If you put some text in the #container:after's content property you will notice what it does
#container {
text-align: justify;
background-color: #FF0000;
}
#container img {
display: inline-block;
}
#container:after {
content: "This is some text";
width: 100%;
display: inline-block;
}
http://www.w3schools.com/cssref/sel_after.asp
Check out this link for more details. #container:after adds content after everything else in the container is loaded.
One way to solve your problem is to set the container's height to 150px, but that's not a very flexible solution. If I were you I wouldn't use these styles. When you create a div and not set it's width and height it resizes automatically to fit it's children. Somehow the #container:after is blocking this feature. Just use something else :)

Answer 3

another approach that doesn't have this whitespace & padding issue would be:
http://jsfiddle.net/eNKhy/3/
#container {
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
vertical-align: bottom;
}
#container, #container img, .stretch{
line-height:0;
}
and add <span class="stretch"></span> in the end of your div