В ячейке таблицы остаётся пустое место внизу

Humanoid · Регистрация: 12.06.2008

Author24 — интернет-сервис помощи студентам

Столкнулся с такой проблемой: мне нужно что бы картинка занимала полностью всю ячейку. Но почему-то внизу остаётся пустое место.
Например, если создать файл:

HTML5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="ru" lang="ru">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
    <style type="text/css">
    img {
        margin : 0;
        padding : 0;
    }
    .t1 { 
        border-collapse : collapse;
    }
    .t1 td {
        padding : 0;
        margin : 0;
        border : 1px solid #000000;
        background-color : red;
    }
    </style>
</head>
<body>
 
<table class="t1">
<tr>
<td><img src="a.bmp" alt="" /></td>
</tr>
</table>
 
</body>
</html>

Цвет фона ячейки специально делаем красным, что бы лучше увидеть пустоту под чёрно-синей картинкой.
Казалось бы, что все margin'ы и padding'и убраны... всё должно быть замечательно. Но на практике получается как на картинке.
Так получается во всех браузерах.

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

@FunDuck · 02.11.2009, 19:35

Вроде помогло:

HTML5

img {
        margin : 0;
        padding : 0;
    display:block;
}

Humanoid · 02.11.2009, 20:20 **[ТС]**

И правда... надо же. Спасибо большое.

@kalimar · 12.08.2015, 00:08

FunDuck БОЛЬШОЕ СПАСИБО

@ns16 · 12.08.2015, 07:49

Есть еще способ:

CSS

1
2
3

img {
    vertical-align: middle;
}

Humanoid Почетный модератор 11525 / 4320 / 448 Регистрация: 12.06.2008 Сообщений: 12,412
	02.11.2009, 20:20 [ТС]	3
	И правда... надо же. Спасибо большое. 0

@kalimar 0 / 0 / 1 Регистрация: 11.08.2015 Сообщений: 2
	12.08.2015, 00:08	4
	FunDuck БОЛЬШОЕ СПАСИБО 0

	12.08.2015, 07:49

Опции темы