← CSS11 / 62

block vs inline

Elemen block (div, p, h1) memakan seluruh lebar dan memulai baris baru. Elemen inline (span, a) hanya selebar isinya dan berjejer. Penting: elemen inline mengabaikan width, height, dan margin vertikal — sumber kebingungan klasik 'kenapa width span saya tidak berubah'. Solusinya display: inline-block atau block.

👀 Contoh dulu

/* span default inline: width DIABAIKAN */
.tag-a { width: 200px; background: pink; }

/* setelah jadi inline-block: width berlaku */
.tag-b { width: 200px; background: lightgreen; display: inline-block; }

Hasilnya: .tag-a tetap selebar teksnya saja, sedangkan .tag-b benar-benar melebar 200px tapi masih sejajar dengan teks.

💡 inline = ikut mengalir bersama teks, block = memakan satu baris penuh, inline-block = sejajar tapi bisa diukur.

📝 Sekarang giliranmu

Buat .tombol (yang aslinya <span>) bisa diberi ukuran dengan display: inline-block, lalu beri width: 150px dan padding: 10px.

Preview
← SebelumnyaBerikutnya →