Skip to main content

Menghilangkan Gap Atau Ruang Kosong Di Bawah Gambar

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.


Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:

PrivacySitemap
©2021 KOMPI AJAIB