在内联元素之间创建填充的最佳方法

Question

我对css比较新，但我想知道在图像之间创建一些填充的最佳方法是什么。比方说，我在同一行上有一系列三个缩略图。我希望每个之间有10px的填充。我尝试浮动它们，但随后所有以下内联元素出现在同一行。

Answer 1

最好的方法是使用无序列表并将margin-left设置为列表项。类似的东西：

<强> 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>

Answer 2

您可以为图片添加一些margin：

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