Pengertian Display inline, block, dan inline-block Pada CSS

Pengertian Display inline, block, dan inline-block Pada CSS

Untuk membuat tampilan website lebih rapi kita memerlukan sebuah property display. Property display memiliki banyak value, namun supaya tidak terlalu pusing kita cukup memahami 3 buah value terlebih dahulu yaitu inline, block, dan inline-block. Kerena ketiga property tersebut yang paling sering digunakan. Untuk pengertian display inline, block, dan inline-block pada CSS sebagai berikut :

Display inline

Display inline yaitu mengalir ke samping, semua konten HTML yang diberikan display inline akan mengalir ke samping. Maksudnya akan memenuhi tempat yang ada di sampingnya, jika sudah mentok ke samping maka konten HTML akan mengisi ke bawahnya. Pada tag HTML bawaan yang memiliki display inline contohnya tag link, image, span, dan lain sebagainya. Apabila menggunakan display inline maka pada CSS tidak bisa diberi property width dan height. Namun kecuali pada tag image bisa menggunakan property width dan height.

Display block

Display blok atau kotak akan mengalir kebawah (kebalikan dari display inline), yaitu konten HTML yang diberikan display block akan mengambil tempat secara block atau penuh ke kanan, jadi jika ada konten lagi setelahnya maka akan ditampilkan di bawahnya. Contoh display block secara bawaan pada tag HTML yaitu tag heading, div, paragraf dan lain sebagainya. Apabila display block maka pada CSS bisa diberi property width dan height.

Display inline-block

Display inline-block merupakan gabungan dari display inline dan block. Sudah dijelaskan pada bagian diatas jika display inline tidak bisa menggunakan property width dan height, dan jika display block bisa menggunakan property width dan height. Maka jika display inline-block yaitu memiliki tampilan seperti inline namun bisa menggunakan property width dan height.

Saya harap kamu memahami perbedaan antara display inline, block dan inline-block setelah membaca penjelasan dari masing-masing poin diatas. Sekarang supaya lebih paham silakan lihat beberapa tag HTML yang secara bawaan menampilkan display inline dan block :

Dari kode diatas jika dibuka pada browser maka akan tampil seperti berikut :

Gambah Hasil Dari Contoh Kode Tag HTML Display inline dan block

Cara Merubah Display inline, block, dan inline-block

Untuk merubah display pada CSS kamu cukup memilih (select) pada element HTML yang di inginkan kemudian diberi property display dengan value inline, block, atau inline-block. Contohnya dapat kamu lihat pada kode dibawah ini :

Dari kode diatas jika ditampilkan pada browser akan tampil seperti dibawah ini :

Gambar Hasil Merubah Display inline, block, dan inline-block

Sekarang lihat pada baris nomor 59 terdapat sebuah tag div dengan id “box“, kemudian lihat pada baris nomor 19 sampai 24 yang terdapat kode CSS dengan selector ID box. Pada selector tersebut terdapat property width dan height, karena displaynya inline maka proprerty width dan height tidak membuat tampilan lebar dan tinggi sesuai value. Dapat dilihat pada hasil gambar diatas.

Apabila kamu mengikuti seri totorial CSS mulai dari awal secara urut dan memahaminya maka kamu pasti dapat dengan mudah mengerti dari contoh kode-kode diatas. Tapi apabila kamu memiliki pertanyaan seputar pengertian display inline, block, dan inline-block pada CSS ini silakan sampaikan dikolom komentar di bawah.

 


Kolom Komentar

Related Post