图像得到5px额外，显示：块不工作

Question

为什么图像之间会有一些额外的空白？他们不应该像粘在一起吗？ 的jsfiddle：http://jsfiddle.net/VS4r7/ 我在这里寻找其他答案，大多数人都说我只是添加display:block但这对我不起作用。

Answer 1

如果您想摆脱元素之间的空白，请将div inline-block更改为table-cell

div {
    height:100px;
    width:100px;
    display:table-cell;
}

Answer 2

当你在任何类型的内联元素中时，源html中的空格被视为内联内容的一部分，占用一些像素。
现在，如果你只需要连续3张图片，首先要删除div包装任何图像，你不需要它。之后，您有两个选择：

1）从div和img中删除任何特定的display指令，并编写3个img标记，其间没有空格：示例：

<img src="#" /><img src="#" /><img src="#" />

用css：

body {
    margin:0;
}

img {

    height:100px;
    width:100px;

}

2）将img标记视为左浮动块，这样就可以忽略空白问题。例如：

<img src="#" />
<img src="#" />
<img src="#" />

使用css：

body {
    margin:0;
}

img {
    display:block;
    height:100px;
    width:100px;
    float:left;
}

注意：如果你在父div中使用浮动块，请记住你可能遇到父div大小的问题，除非你在imgs之后添加一个空div或在父div上添加overflow:hidden css。