Menghilangkan Gap Atau Ruang Kosong Di Bawah Gambar

Ditulis oleh: Adhy Suryadi

Ditulis pada: 8/01/2017

Pernahkah Anda mengalami hal semacam ini ketika membuat atau mengedit template blog? Terdapatnya gap atau ruang kosong di bawah gambar ini kadang masih banyak diabaikan oleh sebagian Blogger karena dianggap tidak terlihat (itu jika background tempat gambar berada berwarna putih).

Namun akan jelas terlihat ada jarak di bawah gambar ketika tempat gambar itu berada memiliki background warna, masalah ini sering terjadi dan terlihat pada gambar di sidebar blog dengan background widget yang memakai background warna.

Tentunya hal ini sering membuat kita keki, meski tempat gambar berada sudah pakai padding: 0; namun tetap ada jarak di bawah gambar atau banner.

Hal ini kecil namun tidak bisa dianggap remeh jika Anda menginginkan tampilan blog Anda menjadi lebih rapih.

Sebagai contoh coba lihat pada Fiddle di bawah ini, terdapat ruang kosong di bawah gambar. Tag div saya kasih background merah dengan padding: 0;


Nah solusi untuk menghilangkan gap atau ruang kosong pada image atau banner tersebut sebenarnya cukup simple yaitu dengan memberikan display: block; pada gambar tersebut seperti berikut ini:

img {

     width: 200px;

     height: 200px;

     display: block;

}

Demo seperti pada Fiddle di bawah ini.


Bagaimana, mudah bukan? Semoga bermanfaat.