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;
}

1 Komentar

  • Anonim

    Memang celah seperti itu sangat mengganggu tampilan blog.. bkin sadar ternyata harus lebih teliti lagi...

Komentar telah ditutup.