Celah pada Kontainer Gambar

Saat Anda menambahkan kontainer pada gambar, terkadang Anda akan mengalami masalah seperti ini:

Gambar Jelek!

.container {
  border:5px solid #FF0080;
}

Sebuah celah tampak menganga pada salah satu sisi gambar yang akan membuat gambar menjadi tampak semakin buruk.
Masalahnya sangat sederhana: Hal itu terjadi karena gambar masih berada dalam satu garis bersama dengan aliran teks. Celah yang mengganggu tersebut sebenarnya hanyalah line-height dari teks yang ikut mengenai gambar.

Cara sederhana untuk mengatasi masalah itu adalah dengan mendeklarasikan display:block pada gambar yang dimaksud sehingga aliran gambar akan terpotong dari teks:

Lebih Baik!

.container {
  border:5px solid #FF0080;
}

.container img {
  display:block;
}