css - 图像在 div 内向下移动

Question

我正在尝试创建一些 div 来保存一堆图像。只是为了测试我现在只放了一张图片。我的问题是它向下移动了 3 个像素。 据我所知，这是因为容器 div 上有 3 个像素的边距，但我不明白为什么会对图像产生任何影响。 我已尝试为图像设置以下内容，但似乎没有任何效果。

padding:0;
margin:0;
border:0;
line-height:0;

http://testdummies.dk/8pane/glue.php

<div class="box small">
   <img src="http://upload.wikimedia.org/wikipedia/commons/c/ce/Noah_Webster_200x200.jpg">
</div>

.box {
    background-color: #B9C4F4;
    border-radius: 3px;
    display: inline-block;
    margin: 3px;
}

我费了好几个小时想弄清楚这个问题，但一无所获。

非常感谢任何帮助!

树脂

Answer 1

发生这种情况是因为将内联元素 (img) 定位在 inline-block 内；

1. 为图像应用display:block;。 或
2. 设置你的.box {display: block;向左飘浮; }