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

как убрать отступ внизу изображения

Во время верстки иногда появляются лишние отступы, которые соответственно введут к ошибкам. Одним из таких случаев это когда изображение расположено внутри блока 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;
}

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

отступ внизу изображения внутри блока div

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

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

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

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

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

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

Похожие статьи:

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

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

Поделиться с друзьями:

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

Delivered by FeedBurner

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

%next_previous_article%

Если у Вас есть какие-то вопросы или предложения, то можете писать их в комментариях или мне на почту sergiu1607@gmail.com. И если Вы заметили какую-то ошибку в статье, то прошу Вас, сообщите мне об этом, и в ближайшее время я всё исправлю.

Добавляйтесь ко мне в друзья в:

Добавляйтесь в мои группы:

Подпишитесь на мои каналы:

Автор статьи: Мунтян Сергей

Копирование материалов с сайта sozdatisite.ru ЗАПРЕЩЕНО!!!

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