Question

我的图片填充或边距有问题。我在我的网站上使用了很多图像，并且它们填充了div元素，因此在一行中有8个，在下一行8中再次。

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

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

我的代码如下：

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

这是一个表达我的问题的方法：http://jsfiddle.net/cv5Xk/

Answer 1

img {

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

Answer 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代码的同一行上将图像彼此相邻。

Answer 3

使用float: left;

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

Answer 4

删除img代码之间的空格并使用css vertical-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;
}

IMG默认填充/边距

4 个答案: