best way to create padding between inline elements

I'm relatively开发者_如何学Python new to css but I was wondering what's the best way to create some padding between images. Say for example, I have a series of three thumbnails that I want on the same line. I want 10px of padding between each. I tried floating them but then all of the following inline elements appear on the same line.

Best way to do it would be to use an un-ordered list and set margin-left to the list item. Something like:

CSS:

ul.thumbnails{
overflow:hidden;
margin:0;
padding:0;
list-style:none;
}

ul.thumbnails li{
float:left;
margin-left:10px;
}

ul.thumbnails li:first-child{
margin-left:0;
}

HTML:

<ul class="thumbnails">
<li><img src="path/to/image" /></li>
<li><img src="path/to/image" /></li>
<li><img src="path/to/image" /></li>
<li><img src="path/to/image" /></li>
</ul>

You could add some margin to your images:

#containerOfImages img {
    margin-right: 10px;
}