DISPLAY INLINE-BLOCK

Inline-Block adalah properti yang sangat berguna dalam CSS, memungkinkan kamu untuk menampilkan elemen di baris yang sama, tetapi dengan kemampuan kontrol layout seperti tinggi, lebar, dan margin.

Menggunakan Inline-Block

Menggunakan CSS inline-block cukup mudah, kamu hanya perlu menetapkan display: inline-block; ke elemen yang diinginkan.

element {
  display: inline-block;
}

Bila kamu menerapkan ini ke elemen, elemen tersebut akan mulai berperilaku seperti elemen inline-block.

Keuntungan dari Inline-Block

Ada beberapa keuntungan menggunakan inline-block, seperti:

• Kemampuan untuk menetapkan tinggi dan lebar seperti elemen block.
• Elemen ini tetap dalam aliran inline normal, seperti elemen inline.
• Proses penataan antara elemen menjadi lebih mudah dan lebih fleksibel.

Contoh Inline-Block dalam CSS

Berikut ini adalah contoh sederhana penggunaan display: inline-block di CSS.

<div style="display: inline-block; width: 50px; height: 50px; background-color: green;"></div>
<div style="display: inline-block; width: 50px; height: 50px; background-color: red;"></div>

Dalam contoh di atas, dua div akan ditampilkan berdampingan, bukan satu di bawah yang lain seperti biasanya terjadi dengan elemen dengan display block.

Mengatur Margin dan Padding

Dengan display inline-block, kamu juga dapat dengan mudah mengatur margin dan padding. Seperti contoh berikut:

<div style="display: inline-block; margin: 10px; padding: 20px; background-color: yellow;">Hello</div>
<div style="display: inline-block; margin: 10px; padding: 20px; background-color: blue;">World</div>

Dalam contoh di atas, dua div akan ditampilkan berdampingan, dengan margin dan padding 10px dan 20px masing-masing, membuat layout yang lebih menarik dan mudah dibaca.