Чтобы удалить зазор под изображением, вы можете:
vertical-align: bottom;
vertical-align: top;
или vertical-align: middle;
display:block;
См. следующий код для живой демонстрации:
#vAlign img {
vertical-align :bottom;
}
#block img{
display:block;
}
div {border: 1px solid red;width:100px;}
img {width:100px;}
No fix:
With vertical-align:bottom; on image:
With display:block; on image:
Разрыв или дополнительное пространство под изображением не является ошибкой или проблемой, это поведение по умолчанию. Основная причина заключается в том, что изображения заменяются элементами ( см. MDN и W3C ). Это позволяет им «действовать как изображение» и иметь собственные собственные размеры, соотношение сторон ... Браузеры вычисляют свое свойство отображения inline
, но они придают им особое поведение, которое приближает их к элементам inline-block
(так как вы
Это также означает, что:
[...] когда изображения используются во встроенном контексте форматирования с выравниванием по вертикали: базовая линия, нижняя часть изображения будет отображаться на базовой линии контейнера. ( source: MDN , focus mine )
Поскольку браузеры по умолчанию вычисляют свойство vertical-align для базовой линии, это значение по умолчанию поведение. На следующем изображении показано, где базовая линия находится по тексту:
[/g15]
Элементы, выровненные по базовой линии, должны содержать место для дескрипторов которые простираются ниже базовой линии (например,
j, p, g ...
), как вы можете видеть на приведенном выше изображении. В этой конфигурации нижняя часть изображения выравнивается по базовой линии, как вы можете видеть в этом примере:
div{border:1px solid red;} img{width:100px;height:auto;}
jpq are letters with descenderВот почему поведение по умолчанию тега
создает пробел в нижней части его контейнера и почему изменение свойства вертикального выравнивания или свойства отображения удаляет его, как в следующей демонстрации:
div {width: 100px;border: 1px solid red;} img {width: 100px;height: auto;} .block img{ display:block; } .bottom img{ vertical-align:bottom; }
Default:
With display:block;
With vertical-align:bottom;