Как убрать зазор между картинками?

sam_rain

Есть следующий код:
<body>
<p>some paragraph, it could be<br/>big or small, whatever.</p>
<div style="width: 400px";>
<img src="red.png"/><img src="black.png"/>
</div>
</body>
Здесь red.png и black.png - картинки 400 x 100px, одна расположена над другой.Между картинками появляется зазор. Как можно этот зазор убрать? Обнуление padding, margin, border - не работает. Во вложении - html с картинками.
4 ответа

sam_rain

можно пока что приладить временно примерно вот так, в стиль к первой ячейки
margin-bottom:-5px;
Хотя откуда этот зазор берется я чесно говоря не знаю Блин, у вас проблема не в этом!11 вы там каккую-то фигню сверху написали!, поэтому и не работало. вот:
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=win-1251" />
    <title>Красное на чёрном</title>
</head>
<body>
    <p>some text</p>
    <div style="width: 429px";>
        <img src="red.png"/><img src="black.png"/>
    </div>
</body>
</html>


sam_rain

- строчный элемент. Соответственно, располагаются в строку. Так как два изображения не помещаются в div, второе автоматически переносится. Между ними появляется промежуток.Я сделал для div правило: line-height:0; и промежуток пропал. Вот только я сам до конца не понял, почему так.


sam_rain

Спасибо!!! Резал картинку, собирал в таблицу для масштабирования и кликабельности в выбранных зонах, но эти зазоры между кусками жутко бесили и не убирались line-height"ом в 0. Может и не может, не знаю. Начал div"ом... зазор остался, но с line-height они ушли, после неудачи с таблицами его не стал использовать, а зря. Спасибо...


sam_rain

img { vertical-align: bottom; line-height: 0 }vertical-align: bottom - чтобы опустить изображение с базовой линии в самый низ строки line-height: 0 - на тот случай если изображение по высоте меньше чем высота строки