CSS font-size & <img>tag - PullRequest
Новая
       9

CSS font-size & <img>tag

2 голосов
/ 26 июня 2011

Проблема с влиянием размера шрифта (line-height)elements

(по крайней мере, в webkit / safari) Кажется, что дополнительное пространство применяется под элементами в соответствии с font-size / line-height, которое влияет на родительский контейнер.

в этом примере,внешний div больше, чем изображение (под изображением добавляется пробел): 

<div class="outer">
    <img src="http://placehold.it/300x100" width="300" height="100">
</div>

, но в этом примере пробел не добавляется: 

<div class="outer">
    <div style="width:300px; height:100px">
</div>

Чем больше размер шрифта(line-height) на внешнем div, чем больше добавленное пространство.Поэтому следующий CSS решит проблему (но на самом деле это не очень полезно): 

.outer{
    line-height: 0;
}

Смотрите полную демонстрацию проблемы здесь: http://jsfiddle.net/mikkelbreum/wtKS2/

Я уверенэто известная «проблема», но я не могу найти хорошее решение этой проблемы с помощью моего поиска в Google ..

Я хотел бы услышать от других, если это хорошо известная проблема (почемуизображение должно рассматриваться как текстовый блок с учетом высоты строки, добавляемой под ним.) И есть ли согласованный способ решения этой проблемы?

1 Ответ

4 голосов
/ 26 июня 2011

Чтобы решить эту проблему, добавьте свойство CSS vertical-align:middle; или vertical-align:text-bottom; к <img>.Это удалит пространство под изображением.

...