IMG 默认填充/边距答案

【问题标题】：IMG default padding/marginIMG 默认填充/边距
【发布时间】：2014-05-18 19:31:29
【问题描述】：

我对图像的填充或边距有疑问。我在我的网站上使用了很多图像，它们填充了一个 div 元素，因此一行中有 8 个，下一行又有 8 个。

现在我总是在它们之间得到一个奇怪的间距，我不知道为什么。我尝试使用负值，但我认为这不是正确的方法。这就是我在这里问的原因。

我尝试使用 dispay:block 但这会将图片全部放在 1 行中，这是我不想要的。我希望它们并排，直到它们达到 div 的最大宽度。

我的代码如下所示：

img {
    width: 50px;
    height: 50px;
    /* display: block; */
    padding: 0;
    margin: 0;
}

这里有一个 jsfiddle 来表达我的问题：http://jsfiddle.net/cv5Xk/

【问题讨论】：

您提供的小提琴中没有填充或边距。你有什么浏览器？也许它只对那个浏览器是本地的。
将float: left;添加到img，最后添加<div style="clear: both"></div>来处理图片溢出容器的情况。
yeah float: left 做到了，我使用谷歌浏览器，但我在 firefox 和 internet explorer 中尝试了小提琴，都一样

标签： html css image margin padding

【解决方案1】：

img {

    float: left;
    width: 50px;
    height: 50px;
    /* prob. you dont need this */
    padding: 0;
    margin: 0;
    border:0;
}

【讨论】：

感谢 float:left 做到了。我不知道为什么或如何，但谢谢！

【解决方案2】：

这两行的区别

<img src='http://i.imgur.com/wipljF1.png' class='playerpreviewbig'><img src='http://i.imgur.com/wipljF1.png' class='playerpreviewbig'>

<img src='http://i.imgur.com/wipljF1.png' class='playerpreviewbig'> <img src='http://i.imgur.com/wipljF1.png' class='playerpreviewbig'>

是第二个在两个图像之间有一个空格，并且根据字体的不同，空格会有所不同。

解决方案是在 html 代码的同一行中将图像彼此相邻。

【讨论】：

谢天谢地浮动：左解决了这个问题。因为我的代码中有超过 100 张图片将它们全部放在 1 行中会很混乱

【解决方案3】：

使用float: left;

img {
    width: 50px;
    height: 50px;
    /* display: block; */
    padding: 0;
    margin: 0;
    float:left;
}

【讨论】：

【解决方案4】：

去掉img标签之间的空格，使用cssvertical-align:top

HTML：

<img src='http://i.imgur.com/wipljF1.png'/>NoSpaces<img src='http://i.imgur.com/wipljF1.png' class='playerpreviewbig'/>NoSpaces<img src='http://i.imgur.com/wipljF1.png' class='playerpreviewbig'/>

CSS：

img {
width: 50px;
height: 50px;
padding: 0;
margin: 0;
vertical-align:top;
}

【讨论】：