Как удалить изображение, которое появляется непреднамеренно?

Question

У меня есть три изображения в контейнере, которые должны быть уложены бесшовно, но между ними есть прокладка.

Вы можете увидеть страницу здесь: http://www.arbitersoflight.net/media/

три большие кнопки в контейнере слева являются те, о которых идет речь.

Вот код для контейнера:

CSS

#mainBoxFull { 
    background-image: url(/img/cont/mainfull.jpg); 
    float: left; 
    height: 560px; 
    width: 560px; 
    margin: 0px; 
    padding: 20px; 
} 

HTML

<div id="mainBoxFull"> 
    <img src="/img/btns/media/bgal.jpg" alt="screenshot" width="560" height="180" border="0" /> 
    <img src="/img/btns/media/bvid.jpg" alt="videos" width="560" height="200" border="0" /> 
    <img src="/img/btns/media/bsoon.jpg" alt="coming soon" width="560" height="180" border="0" /> 
</div> 

Answer 1

Проблема заключается в том, что изображения являются инлайн-блоки. То есть пробелы между ними подсчитываются. Эти пробелы встречаются как дополнение к вам. Использовать

#mainBoxFull img { display: block; } 

и проблема должна исчезнуть. Кроме того, вы можете удалить пустое пространство в исходном HTML между элементами div и img (все пробел).

Answer 2

Другой вариант для решения той же проблемы является

#mainBoxFull{ font-size:0; } 

он будет игнорировать все пробелы между ними. + вы можете указать размер шрифта, где бы вы ни располагали текст.