Mengenal CSS Inline-block dan Cara Menggunakannya

 

CSS Inline-block

CSS inline-block adalah salah satu nilai properti display yang memungkinkan kita untuk mengatur lebar dan tinggi suatu elemen, serta menjaganya tetap berada dalam satu baris dengan elemen lain. Nilai ini berguna untuk membuat layout yang responsif dan fleksibel, seperti navigasi horizontal, grid, atau tombol.

Perbedaan antara inline, inline-block, dan block

Properti display memiliki beberapa nilai yang dapat mempengaruhi cara elemen ditampilkan di halaman web. Berikut adalah perbedaan utama antara inline, inline-block, dan block:

• Inline: Nilai ini membuat elemen menjadi seolah-olah bagian dari teks yang mengelilinginya. Elemen inline tidak dapat memiliki lebar dan tinggi yang ditentukan, dan margin serta padding atas dan bawah tidak berpengaruh. Contoh elemen inline adalah <span>, <a>, dan <img>.
• Inline-block: Nilai ini mirip dengan inline, tetapi memungkinkan kita untuk mengatur lebar dan tinggi elemen. Selain itu, margin dan padding atas dan bawah juga dihormati. Elemen inline-block tetap berada dalam satu baris dengan elemen lain, kecuali jika tidak ada ruang yang cukup. Contoh elemen inline-block adalah <button> dan <input>.
• Block: Nilai ini membuat elemen menjadi kotak yang memenuhi seluruh lebar kontainer. Elemen block selalu memulai baris baru sebelum dan sesudahnya. Kita dapat mengatur lebar dan tinggi elemen, serta margin dan padding di semua sisi. Contoh elemen block adalah <div>, <p>, dan <h1>.

Contoh penggunaan CSS inline-block

Salah satu contoh penggunaan CSS inline-block adalah untuk membuat navigasi horizontal dengan menggunakan list item (<li>). Secara default, list item memiliki nilai display block, yang membuatnya ditampilkan secara vertikal. Dengan mengubah nilai display menjadi inline-block, kita dapat membuat list item ditampilkan secara horizontal.

Berikut adalah contoh kode HTML dan CSS untuk membuat navigasi horizontal dengan menggunakan CSS inline-block:

Hasilnya adalah sebagai berikut:

Kelebihan dan kekurangan CSS inline-block

CSS inline-block memiliki beberapa kelebihan dan kekurangan yang perlu kita ketahui sebelum menggunakannya. Berikut adalah beberapa di antaranya:

Kelebihan

• Kita dapat mengatur lebar dan tinggi elemen tanpa harus menggunakan float atau position.
• Kita dapat menjaga elemen tetap berada dalam satu baris dengan elemen lain tanpa harus menggunakan flexbox atau grid.
• Kita dapat menyesuaikan vertikal align elemen dengan mudah.

Kekurangan

• Kita harus menghapus whitespace antara elemen untuk menghindari jarak ekstra yang tidak diinginkan.
• Kita harus menangani perbedaan baseline antara elemen yang memiliki tinggi atau font-size yang berbeda.
• Kita harus menggunakan hack seperti negative margin atau calc() untuk membuat layout yang presisi.

Kesimpulan

CSS inline-block adalah salah satu nilai properti display yang memungkinkan kita untuk mengatur lebar dan tinggi suatu elemen, serta menjaganya tetap berada dalam satu baris dengan elemen lain. Nilai ini berguna untuk membuat layout yang responsif dan fleksibel, seperti navigasi horizontal, grid, atau tombol.

Namun, CSS inline-block juga memiliki beberapa kekurangan yang perlu kita perhatikan, seperti whitespace antara elemen, perbedaan baseline, dan ketidakpresisian layout. Oleh karena itu, kita harus mempertimbangkan kebutuhan dan tujuan kita sebelum menggunakan CSS inline-block.