Value inline-block untuk property display adalah salah satu value paling handy dalam men-styling HTML. Pikirkan value block dan inline digabungkan. Itulah inline-block.

display:block;

Value block untuk property display pada dasarnya membuat box element dengan default width 100% dan mendorong elemen yang diset turun ke bawah membentuk baris baru dan elemen setelahnya turun lagi ke bawahnya. Kelebihannya, elemen yang diset display:block ini bisa dikenai value negative text-indent sehingga elemen yang diset dengan value block dapat digunakan untuk teknik image replacement. Satu hal lagi: elemen yang diset block bisa diset fixed width.

display:inline

Value inline untuk property display pada dasarnya membuat box elemen yang “menyatu” dengan elemen di kiri dan di kanannya. Value ini merupakan default value untuk kebanyakan elemen. Kekurangan dari value ini adalah elemen yang diset display:inline tidak bisa dikenai value negative text-indent sehingga elemen dengan value display:inline tidak bisa dikenakan teknik image replacement. Satu hal lagi: elemen yang diset inline tidak bisa diset fixed width.

display:inline-block

Value inline-block berperilaku seperti kelebihan inline & block. Elemen yang diset inline-block dapat diset fixed width, dapat dikenakan negative text-indent sehingga bisa digunakan untuk image-replacement, dan “berdiri sejajar” sehingga tidak menurunkan elemen yang bersangkutan dan elemen disebelahnya sebagaimana display:block.

Value ini akan sangat berguna dalam kondisi misalnya anda hendak menerapkan teknik image relplacement kepada satu elemen di dalam satu paragraph.

Untuk lebih jelasnya, lihat box jsfiddle dibawah ini, atau

Lihat halaman demonya disini

One thought on “CSS display:inline-block

  1. […] This post was mentioned on Twitter by Moch. Zamroni, Fikri Rasyid. Fikri Rasyid said: @arisetyo ini yang tentang display:inline-block tea: http://bit.ly/eaawLd #telatbanget […]

Share Your Thought