Баг таблицы

Foxter · August 11, 2012

Сделал таблицу с двумя ячейками (с неустановленной величиной высоты и ширины), в левой ячейке - картинка, в правой - текстовый контент. Проблема в том, что в ячейке с картинкой, под изображением почему-то всегда остаётся свободное пространство примерно в пять пикселей). Сначала думал что у картинки прозрачная полоса внизу, но оказалось что это не так. От чего так получается?

Код:


<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<head>
</head>
<style type="text/css">

td {
padding: 0px;
vertical-align: top;
border: 1px solid black;
}

</style>
<body>

<table>
	<tr>
		<td>
			<img src="01.jpg">
		</td>
		<td>
			Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. 
		</td>
	</tr>
</table>

</body>
</html>

Catherine · August 11, 2012

Возможно, эта статья Вам поможет.

wildhind · August 11, 2012

это не баг.

И не таблицы.

Это закономерный для инлайнового элемента (img) пробел.

Устранить можно, сделав img блочным.

Foxter · August 11, 2012

Возможно, эта статья Вам поможет.

это не баг.
И не таблицы.
Это закономерный для инлайнового элемента (img) пробел.
Устранить можно, сделав img блочным.

Благодарю.

SelenIT · August 11, 2012

Немножко дополню wildhind: не совсем пробел, а отступ базовой линии шрифта (нужный для размещения нижних выносных элементов — свисающих вниз «хвостиков» букв), по которой по умолчанию (vertical-align:baseline) выравнивается нижний край картинки. Кроме смены display, это можно убрать заданием vertical-align:top/bottom.

Еще эта особенность не проявляется при Transitional-доктайпах, в «почти стандартном» режиме браузеров. Но этим не стоит злоупотреблять, т.к. в этом режиме возможны непредвиденности с инлайн-блоками и т.п.

Sign In

Баг таблицы

Question

Foxter

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Catherine

Link to comment

Share on other sites

wildhind

Link to comment

Share on other sites

Foxter

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information