Simplest way of keeping images horizontally aligned without gaps?

Question

What's the simplest correct way of aligning images without gaps horizontally within a div?

If possible I would not like to wrap every image in a div and I would not like to use a list. I'm rather looking for the proper CSS to achieve this with minimal markup.

The biggest problem are the gaps between the images which I can remove by setting the font-size to 0 wich is ugly and works only for Firefox.

<div class="images"><img1><img2><img3></div>

.images {
display: inline;
...???
}

Answer 1

A good way to do it would be to float the images.

However, be sure to add an overflow attirbute to their parent container to ensure it goes all the way around them,

Adding a margin would also neaten them up.

.images {
    overflow: hidden;
}

.images img {
    float: left;
    margin: 0px;
}