Почему, когда я центрирую изображение в элементе div с высотой строки, вверху появляется зазор в 3 пикселя?

Question

Посмотри на эта страница.Изображения справа должны быть центрированы внутри своих элементов div.Но если присмотреться, вверху есть небольшая граница примерно в 3 пикселя.А если отключить overflow: hidden (через Firebug или эквивалент IE8) он торчит снизу.

HTML-код такой:

<div class="small">
    <img src="/images/photos/Bedroom.jpg" alt="Bedroom" />
</div>
<div class="small">
    <img src="/images/photos/View.jpg" alt="View" />
</div>

И CSS, это:

div.small
{
    width:100px;
    height:100px;
    line-height:100px;
    text-align:center;
    overflow:hidden;
    margin:5px;
    background-color: #C0C0C0;
    float:left;
}
div.small img
{
    vertical-align: middle;
    max-width:100px;
    max-height:100px;
    display: inline;
}

Что является причиной этого загадочного разрыва?Я проверил поля и отступы, и, похоже, они не являются проблемой.

Answer 1

Примечание:Я не совсем уверен, что это объяснение правильное, но мне оно кажется разумным.

Во-первых, давайте посмотрим, что говорит спецификация. ведущий и полуведущий:

Поскольку значение «line-height» может отличаться от высоты области содержимого, над и под отображаемыми глифами может оставаться пространство.Разница между высотой контента и используемым значением line-height называется интерлиньяжом.Половину ведущего называют полуведущим.

Пользовательские агенты центрируют глифы по вертикали во встроенном блоке, добавляя полуинтерлиньяж сверху и снизу.Например, если высота фрагмента текста составляет 12 пикселей, а значение line-height равно 14 пикселей, следует добавить 2 пикселя дополнительного пространства:1 пиксель выше и 1 пиксель ниже букв.(Это относится и к пустым клеткам, как если бы пустая клетка содержала бесконечно узкую букву.)

Все идет нормально.Таким образом, любые линейные блоки внутри div.small которые имеют высоту меньше, чем div.small's line-height будет вертикально центрировано с div.small.Теперь давайте посмотрим на тот vertical-align свойство, в частности middle ценить:

Выровняйте вертикальную среднюю точку блока с базовой линией родительского блока плюс половина высоты x родительского блока.

Обратите внимание, что это не обязательно центр линейного блока!Точное положение изменится в зависимости от выбора шрифта и размера.Вы можете убедиться в этом, увеличивая и уменьшая текст:размер зазора меняется.

Как вы обнаружили, установка font-size: 0 полностью устраняет пробел.Поскольку шрифт теперь не имеет высоты, строковый блок получает интерлиньяж и половину интерлиньяжа в 50 пикселей, а базовая линия центрируется по вертикали.Чтобы отобразить vertical-align: middle image браузер устанавливает среднюю точку на этой базовой линии плюс высоту x шрифта, которая теперь равна нулю.Это дает вертикально центрированное изображение.

Answer 2

Оказывается, установка font-size:0; на div решает проблему.Однако это все еще не объясняет разрыв.Кто-нибудь знает, что причины разрыв?

Answer 3

Я не могу полностью объяснить, что происходит, но после решения той же проблемы выяснилось, что это как-то связано с тем, как я объявлял свойство шрифта в CSS, например.

шрифт: 11px/1,35em Verdana, Arial, Helvetica, без засечек;

= очевидно, плохо для столов.-- Я удалил это объявление и вместо него использовал размер шрифта: 11 пикселей, высоту строки: пиксели, семейство шрифтов и т. д., и это устранило пробел!