Html 图像并排，它们之间没有任何空间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4669771/
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
Images side by side without any space between them
提问by costi
I have a grid of images with space between them. How do I remove this space?
我有一个图像网格，它们之间有空间。如何删除这个空间？
I have already tried setting the paddingand marginof the images to 0pxbut it has not worked.
我已经尝试将图像的padding和设置为，但没有奏效。margin0px
Any ideas?
有任何想法吗？
回答by JakeParis
Make sure you don't have any spaces in your html markup. So change:
确保您的 html 标记中没有任何空格。所以改变：
<img src="" alt="" /> <img src="" alt="" />
to
到
<img src="" alt="" /><img src="" alt="" />
Sometimes spaces can hide at the end of new lines too, so be sure to check the end of lines if your html looks like
有时空格也可以隐藏在新行的末尾，所以如果你的 html 看起来像，一定要检查行的末尾
<img src="" alt="" />
<img src="" alt="" />
Edit
编辑
Instead of writing: <img src="imgs/img8.jpg" style="margin: 0; width: 300; height: 300;" />87 times, just put this in your css file:
而不是写：<img src="imgs/img8.jpg" style="margin: 0; width: 300; height: 300;" />87 次，只需把它放在你的 css 文件中：
div img { margin: 0;
width: 300px;
height: 300px;
}
and then you can simply make your images <img src="imgs/img8.jpg" alt="img8" />
然后你可以简单地制作你的图像 <img src="imgs/img8.jpg" alt="img8" />
回答by Yaary
add font-size:0pxto the div, then you can continue keeping the img elements on separate code lines
添加font-size:0px到 div，然后您可以继续将 img 元素保留在单独的代码行上
回答by Refugee
If you use float: lefton the images, and separate each row with a breaker with a clear: boththen there should be no spaces between the images.
如果您float: left在图像上使用，并用带有 的断路器分隔每一行，clear: both则图像之间不应有空格。
回答by Javier
The parameters you need to zero are padding, border and margin. On the images themselves and any container in between.
您需要归零的参数是填充、边框和边距。在图像本身和介于两者之间的任何容器上。
回答by Hanna
Try putting two images on the same line like:
尝试将两个图像放在同一行上，例如：
<img src="imgs/img0.jpg" style="margin: 0; width: 300; height: 300;" /><img src="imgs/img1.jpg" style="margin: 0; width: 300; height: 300;" />
and see if that changes anything. I also suggest you follow the advice about using CSS to simplify all of the image styles. Because right now, you'd have to manually change every value by hand if you wanted to change the image sizes.
看看这是否会改变什么。我还建议您遵循有关使用 CSS 简化所有图像样式的建议。因为现在，如果您想更改图像大小，则必须手动更改每个值。
Unfortunately, HTML has some silly white-space problems sometimes.
不幸的是，HTML 有时会出现一些愚蠢的空白问题。
