Dibandingkan dengan display: inline, perbedaan utamanya adalah bahwa inline-block memungkinkan kita mengatur width dan height pada elemen.
Dibandingkan dengan display: block, perbedaan utamanya adalah bahwa inline-block tidak memulai baris baru, sehingga elemen dapat berjajar bersebelahan.
<!DOCTYPE html>
<html>
<head>
<style>
.kartu-mini {
display: inline-block;
width: 100px;
padding: 10px;
background: #0d2e5c;
color: white;
text-align: center;
border-radius: 6px;
margin: 4px;
}
</style>
</head>
<body>
<div class="kartu-mini">HTML</div>
<div class="kartu-mini">CSS</div>
<div class="kartu-mini">JS</div>
</body>
</html>Elemen inline-block menghormati nilai margin dan padding di semua 4 sisi.