Inline-block CSS

Display: Nilai inline-block

Dibandingkan dengan display: inline, perbedaan utama pada display: inline-block adalah memungkinkan untuk mengatur lebar dan tinggi pada elemen.

Dengan display: inline-block, margin/padding atas dan bawah lebih bernilai, dibanding display: inline.

Juga, dibandingkan dengan display: block, perbedaan utama lainnya adalah display: inline-block tidak menambahkan jeda baris setelah elemen, sehingga elemen tersebut ada di sebelah elemen lainnya.

Contoh berikut menunjukkan perilaku yang berbeda dari display: inline, display: inline-block dan display: block:

Contoh

span.a {
  display: inline; /* the default for span */
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

span.b {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

span.c {
  display: block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

Menggunakan inline-block untuk Membuat Link Navigasi

Salah satu penggunaan umum untuk display: inline-block adalah menampilkan item daftar secara horizontal, bukan vertikal. Contoh berikut membuat link navigasi horizontal:

Contoh

.nav {
  background-color: yellow;
  list-style-type: none;
  text-align: center; 
  padding: 0;
  margin: 0;
}

.nav li {
  display: inline-block;
  font-size: 20px;
  padding: 20px;
}

Sumber referensi: w3schools