В этой статье мы увидим, как удалить зазор, созданный под изображением, при реализации свойства границы CSS. Как правило, мы видели, что когда мы применяем свойство границы к изображению, вокруг изображения или под ним также создается дополнительное пустое пространство. Например, при использовании тега <div>, когда мы помещаем внутрь него изображение, мы получаем дополнительный пробел (почти 2 пикселя) между нижней границей div и изображением внутри него.
Пример:
HTML
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
>
<
title
>White space under the Image</
title
>
<
style
>
.container {
width: 300px;
border: 4px solid rgb(30, 194, 66);
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"container"
>
<
img
src
=
"https://media.geeksforgeeks.org/wp-content/uploads/20220111163542/gfg.png"
alt
=
"GFG_img"
>
</
div
>
</
body
>
</
html
>
Вывод:
Крошечный зазор между нижним концом изображения и нижней зеленой границей div.
Причина, по которой это произошло, связана с поведением браузера по умолчанию, это не ошибка или какая-либо техническая ошибка в браузере. Главное, что тег <img> отображается как встроенный элемент. Таким образом, изображение обрабатывается так же, как алфавит, и оно будет располагаться на базовой линии, такой как a, b, s, A и т. д.
На приведенном выше изображении мы можем видеть такие алфавиты, как g и y, имеющие Descenders, т.е. некоторая часть этих алфавитов находится ниже базовой линии. Поскольку тег <img> рассматривается как элемент встроенного блока. Когда мы помещаем изображение внутрь тега <div>, оно покрывает область до базовой линии, а область ниже остается неиспользованной и воспринимается как пустое пространство. Это поведение по умолчанию, которое создает зазор в нижней части контейнера.
Чтобы избавиться от дополнительного пробела, можно использовать 3 свойства:
- Использование свойства отображения
- Использование свойства вертикального выравнивания
- Использование свойства line-height
Мы подробно разберем эти 3 метода, а также их реализацию. Давайте начнем обсуждение свойства отображения CSS.
Свойство отображения: наиболее часто используемое решение используется для изменения свойства отображения тега <img> внутри контейнера <div> со значения по умолчанию ‘ inline ‘ на ‘ block ‘ с использованием свойства display: block.
Синтаксис:
display: block;
Пример. В этом примере описывается использование свойства display для удаления пустого пространства под изображением.
HTML
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
Removing the white space
using the display Property
</
title
>
<
meta
name
=
"viewport"
content="
width
=
device
-width,
initial-scale
=
1
.0">
<
style
>
.container {
width: 300px;
border: 4px solid rgb(30, 194, 66);
}
.container img {
display: block;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"container"
>
<
img
src
=
"https://media.geeksforgeeks.org/wp-content/uploads/20220111163542/gfg.png"
alt
=
"GFG_logo"
>
</
div
>
</
body
>
</
html
>
Вывод:
Использование свойства display: block
Выравнивание по вертикали: атрибуту «Выравнивание по вертикали » по умолчанию присвоено значение «базовая линия», которое выравнивает элемент по базовой линии родителя. Значение атрибута может быть изменено с базовой линии на нижнюю как vertical-align: bottom.
Синтаксис:
vertical-align: bottom;
Пример: В этом примере описывается использование свойства vertical-align для удаления пустого пространства под изображением.
HTML
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
Removing the white space
using the vertical-align
Property
</
title
>
<
meta
name
=
"viewport"
content="
width
=
device
-width,
initial-scale
=
1
.0">
<
style
>
.container {
width: 300px;
border: 4px solid rgb(30, 194, 66);
}
.container img {
vertical-align: bottom;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"container"
>
<
img
src
=
"https://media.geeksforgeeks.org/wp-content/uploads/20220111163542/gfg.png"
alt
=
"GFG_logo"
>
</
div
>
</
body
>
</
html
>
Вывод:
Использование свойства вертикального выравнивания
Свойство высоты строки: CSS -свойство line-height можно использовать для установки высоты строки, для которой по умолчанию установлено значение normal. Установив высоту контейнера на 0%, можно удалить пустое пространство.
Синтаксис:
line-height: 0%;
Пример: В этом примере описывается использование свойства line-height для удаления пустого пространства под изображением.
HTML
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
Removing the white space
using the line-height
Property
</
title
>
<
meta
name
=
"viewport"
content="
width
=
device
-width,
initial-scale
=
1
.0">
<
style
>
.container {
width: 300px;
border: 4px solid rgb(30, 194, 66);
line-height: 0%;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"container"
>
<
img
src
=
"https://media.geeksforgeeks.org/wp-content/uploads/20220111163542/gfg.png"
alt
=
"GFG_logo"
>
</
div
>
</
body
>
</
html
>
Вывод:
Использование свойства line-height