Как избавиться от пробела под изображением?

В этой статье мы увидим, как удалить зазор, созданный под изображением, при реализации свойства границы 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