Block vs. Inline Elements: Memahami Perbedaan dan Penggunaannya
Dalam HTML, setiap elemen dikategorikan sebagai block atau inline, dan pemahaman tentang perbedaan ini sangat penting untuk menata halaman web Anda dengan benar menggunakan CSS.
1. Block-Level Elements
Elemen block selalu dimulai pada baris baru dan secara default menempati lebar penuh dari elemen induknya. Setiap elemen ini menciptakan "blok" konten yang baru.
Karakteristik Utama:
- Selalu dimulai dari baris baru.
- Mengisi seluruh lebar yang tersedia secara otomatis.
- Anda bisa mengatur lebar (width), tinggi (height), serta margin dan padding di semua sisi.
- Dapat berisi elemen block atau inline lainnya.
Contoh Umum:
- <h1>,
- <p>,
- <div>,
- <header>,
- <section>,
- <footer>,
- <form>,
- <ul>,
- <li>.
<p>Ini adalah paragraf pertama.</p>
<p>Ini adalah paragraf kedua.</p>Hasilnya akan menampilkan setiap paragraf pada baris yang berbeda.
2. Inline Elements
Elemen inline tidak memulai baris baru. Elemen ini hanya menempati ruang yang dibutuhkan oleh isinya, sehingga elemen lain bisa diletakkan di sampingnya pada baris yang sama.
Karakteristik Utama:
- Tidak memulai dari baris baru.
- Hanya menempati ruang yang diperlukan oleh isinya.
- Tidak bisa diatur width dan height. Margin dan padding vertikal juga tidak berfungsi dengan baik.
- Hanya dapat berisi data atau elemen inline lainnya.
Contoh Umum:
- <a>,
- <strong>,
- <em>,
- <span>,
- <img>,
- <input>.
<p>Ini adalah teks dengan <a href="#">tautan</a> di dalamnya.</p>Hasilnya akan menampilkan teks dan tautan dalam satu baris yang sama.
Perbedaan Kunci Antara Block dan Inline
Berikut adalah perbandingan yang jelas untuk membantu Anda membedakan keduanya:
Perilaku Baris Baru:
- Block: Selalu dimulai di baris baru.
- Inline: Tidak memulai baris baru, melainkan berada di samping elemen lainnya.
Dimensi & Ukuran:
- Block: Anda bisa mengatur width dan height.
- Inline: Anda tidak bisa mengatur width dan height.
Margin & Padding:
- Block: Margin dan padding di semua sisi (atas, bawah, kiri, kanan) berfungsi dengan baik.
- Inline: Hanya margin dan padding horizontal (kiri-kanan) yang efektif.
Struktur Konten:
- Block: Dapat berisi elemen block dan inline lainnya.
- Inline: Hanya dapat berisi data atau elemen inline lainnya.
Mengubah Perilaku dengan CSS
Anda bisa mengubah perilaku bawaan elemen dengan properti display di CSS:
- display: block;: Mengubah elemen inline menjadi block.
- display: inline;: Mengubah elemen block menjadi inline.
- display: inline-block;: Kombinasi keduanya. Elemen ini tidak memulai baris baru, tetapi Anda bisa mengatur width, height, serta margin dan padding di semua sisi. Ini sangat berguna untuk tata letak tombol navigasi atau galeri foto.
