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

• vertical-align: middle;
• display: block;
• float: left/right;
• Как сделать надпись под картинкой

По умолчанию у картинки 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>