Отступ под изображением | HTML

По умолчанию у картинки vertical-align: baseline;.

котёнок мечтает стать львом на одной линии с текстом. Без свисания букв (р,д,у,ц)
<style>
figure {
  border: 10px solid #456;
}
</style>

<figure>
  <img alt="" src=""> на одной линии с текстом. Без свисания букв (р,д,у,ц)
</figure>

Как убрать нижнюю полосу или отступ от картинки до div (или другого родительского элемента)

Вариант 1. Разместить изображение по середине строки

котёнок мечтает стать львом посмотреть немного другой ракурс
<style>
figure {
  border: 10px solid #456;
}
img {
  vertical-align: middle;
}
</style>

<figure>
  <img alt="" src=""> посмотреть немного другой ракурс
</figure>

Вариант 2. Убрать размер шрифта или высоту строки

котёнок мечтает стать львом
<style>
figure {
  border: 10px solid #456;
  line-height: normal; font-size: 0; /* или */  line-height: 0;
}
</style>

<figure>
  <img alt="" src="">
</figure>

Вариант 3. Сделать фотографию блоком

котёнок мечтает стать львом
<style>
figure {
  border: 10px solid #456;
}
img {
  display: block;
}
</style>

<figure>
  <img alt="" src="">
</figure>

Вариант 4. Задать фото float

котёнок мечтает стать львом См. про свойство float
<style>
figure {
  display: inline-block;  /* убрать действие float вне родительского блока */ 
  width: calc(100% - 100px);  /* Аааа!!!! Почему именно 100px???? Я к этой цифре пришла путём перебора значений */ 
  border: 10px solid #456;
}
img {
  float: left;
}
</style>

<figure>
  <img alt="" src="">
</figure>
в f t
наверх ↑

2 комментария:

Анонимный
"Убрать ... линию высоты"? line height - высота строки.
NMitra
Спасибо, исправила! У меня иногда бывает, когда язык заплетается. По-видимому, это сказывается и на письме. И ведь дописывала этот фрагмент этой статьи, когда сочиняла http://shpargalkablog.ru/2014/04/line-height-css.html