Почему изображение личинки не на желтом фоне? - PullRequest
Новая
       1

Почему изображение личинки не на желтом фоне?

0 голосов
/ 03 апреля 2011 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<style type="text/css">
*{padding:0px;margin:0px;}
.strip {width:1000px;border:1px solid red;clear:none;height:10px;}
.box{display:inline-block;width:17px;height:inherit;}
img{width:inherit;height:inherit;}
</style>
<body>
<div class="strip" style="background-color:green;">

<div class="box" style="background-color:yellow;">
<img src="larrow.gif">
</div>

</div>
</body>
</html>

У меня проблема, потому что мое изображение, помещенное в «коробку», немного смещено. Но когда высота больше 20 пикселей, она остается на месте. Не могли бы вы сказать мне, что происходит?

1 Ответ

1 голос
/ 04 апреля 2011

Конечно. Ваше изображение выравнивается по базовой линии div. Настройка высоты строки по умолчанию для вашего div дает расстояние между базовой линией и вершиной div в 20px, поэтому, когда изображение имеет размер 20px, оно заполняет это пространство. Любое большее значение заставляет высоту линии увеличиваться, но любое меньшее значение оставляет зазор выше. Возможны различные решения, в зависимости от того, что именно вы хотите, но установка изображения на { vertical-align:top; } - это один из подходов или уменьшение высоты строки div.strip до высоты изображения - это другой.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...