Элементы пространства внутри div

Question

Я хочу иметь 3 изображения в одной строке, плавающие вправо и с некоторым разницей между ними. Если я использую следующий код:

<div style="float:right"> 
    <img src="http://relevance.com/wp-content/uploads/2013/05/youtube-logo.jpg" width="40"> 
    <img src="http://relevance.com/wp-content/uploads/2013/05/youtube-logo.jpg" width="40"> 
    <img src="http://relevance.com/wp-content/uploads/2013/05/youtube-logo.jpg" width="40"> 
</div> 

тогда мои изображения находятся на одной линии, но я не знаю, как установить границы между каждой.

Если я помещаю каждое изображение в своем собственном DIV, таких как:

<div style="float:right"> 
    <div style:"margin-left:10"><img src="http://relevance.com/wp-content/uploads/2013/05/youtube-logo.jpg" width="40"></div> 
    <div style:"margin-left:10"><img src="http://relevance.com/wp-content/uploads/2013/05/youtube-logo.jpg" width="40"></div> 
    <div style:"margin-left:10"><img src="http://relevance.com/wp-content/uploads/2013/05/youtube-logo.jpg" width="40"></div> 
</div> 

, то я не могу установить поле, но мои изображения больше не отображаются на той же линии, все они плавают прямо и в конечном итоге в одном колонка.

Каков правильный способ сделать это?

Answer 1

попробовать следующие

<div id="container"> 
    <div class="abc" > image.. </div> 
    <div class="abc" > image.. </div> 
    <div class="abc" > image.. </div> 
</div> 

затем в CSS

#container{ 
    overflow:hidden; 
    width:auto; 
    display:inline; 
} 
.abc{ 
    float:right; 
    margin-left:10px; 
} 

Вы можете проверить рабочую демо-версию здесь http://jsfiddle.net/QjL2D/

Answer 2

По умолчанию, маржа, обивка и границы, в дополнение к ширине элемента , а не включаться в эту ширину. Хотя ваш пример не указывает ширину контейнера div, поведение указывает, что он, вероятно, находится между 120px и 149px, считая, что у него нет отступов или границ.

Предполагая, что контейнер равен 120px, вам нужно либо уменьшить размер изображений, либо удалить их поля.

Предполагая, что размер изображения зафиксирован, вам необходимо либо удалить поля, либо сделать контейнер более широким.

скрипку: http://jsfiddle.net/sGxP7/

HTML:

<div class="container"> 
    <div class="image-holder"><img src="http://relevance.com/wp-content/uploads/2013/05/youtube-logo.jpg" width="40"></div> 
    <div class="image-holder"><img src="http://relevance.com/wp-content/uploads/2013/05/youtube-logo.jpg" width="40"></div> 
    <div class="image-holder"><img src="http://relevance.com/wp-content/uploads/2013/05/youtube-logo.jpg" width="40"></div> 
</div> 

CSS:

.container { 
    float: right; 
    width: 150px; 
    padding: 0; 
    margin:0; 
    background: #CCC; 
} 

.image-holder { 
    margin:0 10px 0 0; 
    float: right; 
    padding: 0; 
} 

img { 
    padding: 0; 
    margin: 0; 
}