Прибираємо відступ під зображенням

Сьогодні я покажу декілька, а точніше 5 способів прибрати зайвий відступ у тега <img>. Якщо ми розташовуємо зображення у блоковому елементі(наприклад <div>) або у елементі котрий став блоковим(наприклад, йому присвоєно властивість display: block; чи float; left/right;). У цьому випадку з'являється невеличкий відступ у декілька пікселів під тегом <img>.

Трохи розібравшись, стає зрозуміло, що це ніякий не баг, а зрозуміла поведінка браузера. Через те, що <img> внутрішньо рядковий елемент, він отримує стандартне значення vertical-align: baseline;, що дає той самий відступ.

Прибираємо відступ під зображенням

Зайві відступи можуть призводити до помилок, тому бажано від них відразу позбутися.

Вирішити цю проблему дуже просто.

Найпростіший варіант: просто зробити зображення блоковим.

img {
	display: block;
}

Також є ще декілька робочих способів.

Задаємо картинці від'ємний відступ:

img {
	margin-bottom: -5px;
}

Також прибирає відступ. Можна також використати значення bottom:

img {
	vertical-align: middle;
}

Задаємо батьківському елементу нульовий міжрядковий інтервал:

div {
	line-height: 0;
}

Як й у минулому прикладі, присвоюємо батьківському елементу:

div {
	font-size: 0;
}