Как убрать отступ под изображением

Во время верстки иногда появляются лишние отступы, которые соответственно введут к ошибкам. Одним из таких случаев это когда изображение расположено внутри блока div. И в этой статье, хочу Вам рассказать о том, как убрать лишний отступ внизу изображения.

Сейчас покажу Вам проблему на примере.

HTML код:

<div>
    <img src="http://lorempixel.com/320/320/people/some-text" alt=" " />
</div>

CSS код:

div{
    border: 1px solid #000;
    margin: 300px auto 0;
    width: 320px;
}

Вот как выглядит это в браузере:

Для того чтобы убрать этот лишний отступ нужно всего лишь в стилях, для изображения добавить свойство display: block;

div{
    border: 1px solid #000;
    margin: 300px auto 0;
    width: 320px;
}

div img{
    display: block;
}

И вот результат:

Другие способы, которые помогут убрать нижний отступ у изображения

Также Вы можете воспользоваться одним из перечисленных ниже способов.

Html разметка во всех способах остается без изменений.

1. Способ. Родительскому блоку div задать свойство line-height со значением 0, и отступ исчезнет.
2. Способ. Изображению задать свойство vertical-align со значением middle.
3. Способ. Родительскому блоку div задать свойство font-size со значением 0px.
4. Способ. Состоит в том чтобы задать изображению отрицательный нижний отступ со значением -5px.

Можете тестировать все эти способы на практике и выбрать тот, который Вам по душе.

И на этом у меня все. Теперь Вы знаете 5 способов как убрать нижний отступ у изображения, которая находится внутри блока div. Пользуйтесь на здоровье :)

Понравилась статья?

Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.

Подписаться на новые статьи:

Поддержите пожалуйста мой проект!

Дата добавления: %date%