Block element vs inline element

Apa yang ada didalam pikiran kita saat membaca kalimat "Block Element" dan "Inline Element"? Mungkin secara arti dalam makna terjemah Indonesia dapat diartikan, elemen yang ada dalam satu baris, dan elemen yang bertolak belakang, atau tidak menyatu.

Baiklah, keduanya  merupakan istilah dalam dunia programming, dan merupakan salah satu dasar yang penting untuk di pelajari. Secara default keduanya merupakan dasar pemahaman dalam penyusunan UI (user interface) sebuah website.

Hakikatnya inline element akan mengambil area pada web secara menumpuk atau berada pada satu baris hingga menghabiskan semua area pada website. Sedangkan block element akan mengambil satu baris penuh  area website yang diwakili oleh kode br.

Berikut contoh inline element:

<div style= "background-color: yellow; border: 1px solid">Halo dunia</div>

<div style= "background-color: brown; border: 1px solid">Halo people</div>

Berikut adalah hasil running kode :

Halo dunia

Halo people

Berikut contoh block element:

<div style= "background-color: red; border: 1px solid">Halo dunia</div>

<br/>

<div style= "background-color: red; border: 1px solid">Halo people</div>

Hasil running kode block element:

Halo dunia

Halo people

Jika kita lihat pada desktop area maka kotak (dengan kode inline element) akan menumpuk pada satu baris. Meskipun pada kode kita sudah menuliskannya pada baris yang berbeda.  Sehingga dapat disimpulkan inline element akan menghabiskan atau mengisi hingga penuh satu baris, jika telah penuh maka dia akan berpindah ke baris selanjutnya.

Sedangkan, pada block element bersifat sebaliknya. Dia akan mengisi penuh area browser. Sehingga dia akan mengisi satu baris sendiri. Bisa kita liat dari terdapatnya jarak kosong.