DISPLAY BLOCK VS INLINE

Dalam CSS, display memiliki beberapa nilai, seperti block dan inline yang mengubah bagaimana elemen ditampilkan di halaman web. Nilai ini mengubah bagaimana elemen berinteraksi dengan elemen lain di sekitarnya.

Display Block

Elemen block selalu memulai baris baru di halaman web. Elemen ini akan mengambil seluruh lebar yang tersedia, dengan margin atas dan bawah, tetapi bukan di samping.

p {
  display: block;
}

Dalam contoh di atas, elemen <p> akan ditampilkan sebagai elemen block. Ini berarti paragraf akan memulai di baris baru dan membentang sejauh mungkin ke kanan dan ke kiri.

Display Inline

Berbeda dengan elemen block, elemen inline tidak memulai baris baru dan hanya mengambil lebar sebanyak yang diperlukannya saja.

span {
  display: inline;
}

Elemen <span> dalam contoh di atas akan ditampilkan sebagai elemen inline. Ini berarti elemen tersebut tidak akan memulai garis baru dan hanya akan mengambil ruang yang diperlukan.

Jadi, jika kamu mencoba menerapkan margin atau padding ke atas dan bawah elemen inline, perubahan tersebut tidak akan berpengaruh.

Perbedaan Utama

Perbedaan utama antara keduanya adalah cara mereka berinteraksi dengan elemen lain di sekitarnya. Elemen block akan memulai baris baru dan mengambil seluruh lebar yang tersedia, sedangkan elemen inline akan berdampingan dengan elemen lain dan hanya mengambil ruang yang diperlukan.

Ini penting ketika kamu mencoba merancang layout halaman web, karena memahami cara kerja display ini akan membantu kamu membuat desain yang lebih efektif dan enak dilihat. Jadi selanjutnya, jika ada elemen yang tidak ditampilkan seperti yang kamu inginkan, coba periksa nilai display mereka.