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

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 ( all пробел).

Answer 2

Другой вариант решения этой проблемы -

#mainBoxFull{ font-size:0; }

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