Menghilangkan Gap Atau Ruang Kosong Di Bawah Gambar

Pernahkah Anda mengalami hal semacam ini saat menciptakan atau mengedit template blog? Terdapatnya gap atau ruang kosong di bawah gambar ini kadang masih banyak diabaikan oleh sebagian Blogger alasannya ialah dianggap tidak terlihat (itu kalau background kawasan gambar berada berwarna putih).

Namun akan terang terlihat ada jarak di bawah gambar saat kawasan gambar itu berada mempunyai background warna, persoalan ini sering terjadi dan terlihat pada gambar di sidebar blog dengan background widget yang menggunakan background warna.

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

Hal ini kecil namun tidak sanggup dianggap remeh kalau Anda menginginkan tampilan blog Anda menjadi lebih rapih.

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


Nah solusi untuk menghilangkan gap atau ruang kosong pada image atau banner tersebut bekerjsama cukup simple yaitu dengan menawarkan display: block; pada gambar tersebut menyerupai berikut ini:

 img {
      width: 200px;
      height: 200px;
      display: block;
 }

Demo menyerupai pada Fiddle di bawah ini.


Bagaimana, gampang bukan? Semoga bermanfaat.



Sumber https://www.kompiajaib.com/

Share this post