Помогите с <img>

[vzdrizd]

Здравствуйте. Добавляю в верству изображения

<div class="buttom">

<img src="images/news-btn.jpg" alt="НОВОСТИ">

<img src="images/faq-btn.jpg" alt="FAQ">

<img src="images/forum-btn.jpg" alt="FAQ">

<img src="images/contacts-btn.jpg" alt="FAQ">

<img src="images/support-btn.jpg" alt="FAQ">

</div>

при просмотре страницы между изображением есть пустые промежутки или отступы. Подскажите новичку как их убрать. padding или margin не помогают.

[wwt]

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

.buttom img {float:left;}

Edited August 19, 2013 by wwt

[antonKar]

<div class="buttom">

<img src="images/news-btn.jpg" alt="НОВОСТИ"><!--

--><img src="images/faq-btn.jpg" alt="FAQ"><!--

--><img src="images/forum-btn.jpg" alt="FAQ"><!--

--><img src="images/contacts-btn.jpg" alt="FAQ"><!--

--><img src="images/support-btn.jpg" alt="FAQ">

</div>

Либо, как сказали выше, писать в одной строке

Edited August 19, 2013 by antonKar

[wwt]

Если в блоке .buttom не будет текстовых элементов можно еще вот так:

 .buttom {font-size:0;}

[Switch74]

еще можно так

img{float:left;display:block;}

[wwt]

еще можно так

img{float:left;display:block;}

display:block не нужен. У img есть такой аттрибут align который указывает положение относительно текста или других картинок. Считается устаревшим и не рекомендуется к использованию, но можно использовать CSS свойство float

[Switch74]

align:left; оставляет пространство между строчками почему-то, а block - привычка (чтоб наверняка)

[antonKar]

Если элементу задан float, отличный от none, то запись display: block является излишней потому что элементу по умолчанию будет присвоено блочное отображение

[Switch74]

так же как и align с float, но не всегда

[SelenIT]

align:left; оставляет пространство между строчками почему-то

А вот нечего пользоваться устаревшими атрибутами

block - привычка (чтоб наверняка)

Видимо, корни привычки тянутся из борьбы с отступами под базовой линией текста, по которой картинки равняются по умолчанию. Но их точно так же можно убрать через vertical-align: top/bottom, еще и с меньшими издержками (картинки останутся в ряд по горизонтали).

[CoDy]

Если в блоке .buttom не будет текстовых элементов можно еще вот так:

 .buttom {font-size:0;}

При таком подходе, если картинка не будет найдена, то указанный для параметра alt текст не будет выведен.

[wwt]

Если в блоке .buttom не будет текстовых элементов можно еще вот так:

 .buttom {font-size:0;}

При таком подходе, если картинка не будет найдена, то указанный для параметра alt текст не будет выведен.

Ну так да )) Но это уже другая проблема )

.box {font-size:0;}
.box img {font-size: 16px;}

Но я бы float лучше использовал меньше телодвижений.