Menghilangkan Gap Dari Element Dengan Display: Inline-Block

Ketika kita sedang merapihkan layout blog, kadang kita mendapati sebuah element yang susah diatur. Meski semua jurus CSS yang kita kuasai telah dikeluarkan, namun element tersebuh masih badung dan susah diatur.

Salah satu element yang susah diatur ini ialah adanya gap atau ruang kosong di antara element yang memakai display: inline-block; ibarat pada list menu horizontal ataupun lainnya.

Tentu saja hal ini kadang menciptakan putus asa bila kita tidak sanggup menemukan solusinya. Gap dari display: inline-block; yang aku maksud ini ibarat pada Fiddle di bawah ini, silahkan lihat instruksi HTML dan CSS nya.


Nah bekerjsama ada beberapa solusi untuk mengatasi hal ini ibarat berikut ini.

Solusi 1

Coba menambahkan float: left;


Namun kadang style CSS blog sering mempengaruhi element lainnya. Kadang sehabis menambahkan float: left; pun ruang kosong di antara element dengan display: inline-block; masih tetap ada. Jika hal tersebut terjadi silahkan coba solusi berikutnya.

Solusi 2

Coba tambahkan font-size: 0; pada induk element. Misalkan dengan ul dan li, maka tambahkan font-size: 0; pada ul dan font-size: 16px; pada li (hanya contoh, font-size pada li sanggup berapa saja).


Semoga bermanfaat.
Sumber https://www.kompiajaib.com/

Share this post