лучший способ создать отступ между встроенными элементами

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;
}