1. Block-Level Elements
Definisi: Elemen tingkat blok adalah elemen yang selalu memulai baris baru dan browser secara otomatis menambahkan margin sebelum dan sesudahnya.
Karakteristik Utama:
- Garis Baru: Selalu dimulai di baris baru.
- Lebar Penuh: Secara default akan memenuhi lebar 100% dari kontainer induknya.
- Manipulasi CSS: Kita bisa mengatur
width, height, padding, dan margin secara bebas.
- Nesting: Dapat menampung elemen blok lainnya maupun elemen inline.
Contoh Elemen:
<div>, <h1>-<h6>, <p>, <ul>, <form>, <header>, <footer>, <section>.
Visualisasi Perilaku Block:
Elemen Blok A (Mengambil 1 baris penuh)
Elemen Blok B (Terpaksa turun ke bawah)
2. Inline Elements
Definisi: Elemen inline hanya mengambil lebar sebanyak yang diperlukan sesuai dengan isi kontennya, dan tidak memaksa baris baru.
Karakteristik Utama:
- Aliran Horizontal: Elemen ini akan berjajar ke samping selama ruang di baris tersebut masih cukup.
- Lebar Konten: Hanya selebar teks atau objek di dalamnya.
- Batasan CSS: Properti
width dan height tidak akan berfungsi. Padding dan margin hanya berpengaruh secara horizontal (kiri-kanan).
- Nesting: Hanya boleh menampung elemen inline lainnya, tidak boleh menampung elemen blok.
Contoh Elemen:
<a>, <span>, <img>, <strong>, <em>, <button>, <input>.
Visualisasi Perilaku Inline:
Inline A
Inline B
Inline C
(Mereka semua berada dalam satu baris yang sama)