CSS Inline-block

CSS Layout - display: inline-block

Nilai inline-block pada properti display memungkinkan elemen untuk:

• Berbaris secara horizontal (seperti inline)
• Namun tetap bisa diberi width dan height (seperti block)

Perbandingan block, inline, dan inline-block

Contoh: inline-block

<style>
  .box {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: steelblue;
    color: white;
    text-align: center;
    line-height: 100px;
  }
</style>
 
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>

Catatan Penting

• Elemen inline-block tidak memecah baris, melainkan akan terus tampil secara horizontal hingga lebar layar habis.
• Perhatikan bahwa whitespace (spasi) di antara elemen HTML dapat menyebabkan jarak antar elemen.