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

В то время как разработка пользовательского программного обеспечения Изучение

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

Мы подробно разберем эти 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>

Вывод:

Читайте также:  Что такое методы подчеркивания в Backbone.js?

Использование свойства вертикального выравнивания

Свойство высоты строки: 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

Оцените статью
bestprogrammer.ru
Добавить комментарий