Изображение, перемещающееся внутри div

Question

Я пытаюсь создать несколько divs для хранения кучи изображений. Просто, чтобы проверить, я пока только нарисовал 1 изображение. Моя проблема в том, что он перемещается на 3 пикселя. Насколько я могу судить, это потому, что у меня есть поле с 3 пикселями в контейнере div, но я не понимаю, почему это влияет на изображение. Я попытался установить следующее для изображения, но ничего не работает.

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) внутри инлайн-блока;

1. Применить display:block; для изображения. ИЛИ
2. Установите ваш .box {display: block; float: left; }