В этой статье мы увидим, как удалить зазор, созданный под изображением, при реализации свойства границы CSS. Как правило, мы видели, что когда мы применяем свойство границы к изображению, вокруг изображения или под ним также создается дополнительное пустое пространство. Например, при использовании тега <div>, когда мы помещаем внутрь него изображение, мы получаем дополнительный пробел (почти 2 пикселя) между нижней границей div и изображением внутри него.
Пример:
HTML
<!DOCTYPE html><htmllang="en"><head><meta><title>White space under the Image</title><style>.container {width: 300px;border: 4px solid rgb(30, 194, 66);}</style></head><body><divclass="container"><imgsrc="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 spaceusing the display Property</title><metaname="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><divclass="container"><imgsrc="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 spaceusing the vertical-alignProperty</title><metaname="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><divclass="container"><imgsrc="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 spaceusing the line-heightProperty</title><metaname="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><divclass="container"><imgsrc="https://media.geeksforgeeks.org/wp-content/uploads/20220111163542/gfg.png"alt="GFG_logo"></div></body></html>
Вывод:
Использование свойства line-height
