Html div内的空间元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18560219/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Space elements inside div
提问by user1188374
I want to have 3 images on the same line, floated to the right, and with some margin between each. If I use the following code:
我想在同一行上有 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>
then my images are on the same line but I don't know how to set the margin between each.
然后我的图像在同一行上，但我不知道如何设置每个图像之间的边距。
If I place each image in its own div such as:
如果我将每个图像放在自己的 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>
then I can set the margin but my images are no longer displayed on the same line, they all float right and end up in one column.
然后我可以设置边距，但我的图像不再显示在同一行上，它们都向右浮动并最终在一列中。
What is the proper way to do this?
这样做的正确方法是什么？
采纳答案by Ichigo Kurosaki
try following
尝试跟随
<div id="container">
<div class="abc" > image.. </div>
<div class="abc" > image.. </div>
<div class="abc" > image.. </div>
</div>
then in css
然后在css中
#container{
overflow:hidden;
width:auto;
display:inline;
}
.abc{
float:right;
margin-left:10px;
}
You can check the working demo here http://jsfiddle.net/QjL2D/
您可以在此处查看工作演示http://jsfiddle.net/QjL2D/
回答by rolfsf
By default, margin, padding and border are in addition to the element width, rather than included in that width. Though your example doesn't indicate the width of the container div, the behavior indicates it is probably between 120px and 149px, assuming it has no padding or border.
默认情况下，边距、填充和边框是元素宽度的补充，而不是包含在该宽度中。虽然您的示例没有指示容器 div 的宽度，但行为表明它可能在 120 像素和 149 像素之间，假设它没有填充或边框。
Assuming the container is 120px, you need to either make your images smaller or remove their margins.
假设容器为 120 像素，您需要缩小图像或移除它们的边距。
Assuming the image size is fixed, you need to either remove the margins or make the container wider.
假设图像大小是固定的，您需要移除边距或使容器更宽。
a fiddle: http://jsfiddle.net/sGxP7/
小提琴：http: //jsfiddle.net/sGxP7/
html:
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:
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;
}
