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.