Jadi, ada dua jenis display dari sebuah elemen HTML, yaitu block atau inline.
Elemen yang berjenis block secara default selalu ditampilkan di baris baru dan mengambil space lebar sebuah dokumen HTML. Hal ini berarti, jika ada elemen lain, maka akan ditampilkan di bawah elemen block tadi (tidak mungkin berada di samping kanan maupun kiri).
Sedangkan elemen yang berjenis inline secara default selalu ditampilkan
pada baris yang sama dengan elemen sebelumnya. Sehingga akan tampak seperti tersusun
dengan beberapa bagian.
Untuk lebih jelasnya silahkan
perhatikan gambar berikut:
Dari gambar di atas sangat bisa
disimpulkan bahwa elemen block secara default tampil dengan baris baru
sedangkan inline secara default selalu ditampilkan pada baris yang sama.
Contoh dan Penggunaan Elemen Block
Salah satu elemen block yang
bersifat general adalah div. Elemen div tidak memiliki arti
khusus, akan tetapi sering digunakan sebagai elemen container. Elemen ini
popular untuk membuat suatu bagian khusus di dalam dokumen HTML.
Contoh penggunaan elemen div:
<div>tulis content di sini</div>
Contoh elemen lain yang mempunyai
sifat block antara lain h1-h6, form, hr, li, ol,
ul, p, table, dll. Anda bisa mencoba dan membuktikan bahwa
setiap elemen block akan secara default ada di baris baru kecuali dengan adanya
bantuan atribut dan property yang ada di CSS.
Contoh dan Penggunaan Elemen Inline
Salah satu elemen inline yang
bersifat general adalah span. Sama seperti elemen div, elemen span tidak
memiliki arti khusus, akan tetapi sering digunakan untuk sebagai container
dari elemen teks.
Contoh penggunaan elemen span:
<span>tulis content di sini</span>
Elemen lain yang memiliki sifat inline antara
lain a, button, i, input, select, textarea,
strong, sub, sup, dll.
Silahkan Anda coba, maka secara default akan menampilkan secara tersusun tanpa menggunakan baris baru.
Rahasia Elemen Block di dalam CSS
Seperti sudah kita bahas sebelumnya
bahwa elemen block itu menggunakan baris baru, namun dalam praktiknya kita bisa
memaksa elemen block mirip seperti elemen inline.
CSS sudah menyediakan property yang berguna untuk membuat elemen block berubah menjadi elemen inline, yaitu dengan CSS Float.
Properti float digunakan untuk memposisikan elemen block di sebelah kiri atau di sebelah kanan sesuai dengan keinginan Anda sebagai programmer.
Coba perhatikan contoh program di bawah ini:
Jika kita hanya menggunakan elemen
<div> pada umumnya, maka tidak akan bisa menyatukan sidebar dengan content
seperti pada gambar. Namun kita tetap bisa memaksanya dengan sedikit
menambahkan float:left; pada
sidebar.
Contoh:
Pada class .sidebar ditambahkan sebuah property float:sidebar yang akhirnya memaksa elemen block menjadi elemen inline.
Trik memaksa elemen block menjadi inline ini banyak digunakan oleh para web designer untuk memaksimalkan penampilan websitenya.
Jika Anda belum percaya silahkan kunjungi situ-situs mereka, pasti Anda akan menemukan trik ini mereka terapkan di dalam websitenya.
Jadi, pada dasarnya elemen block maupun inline merupakan dua elemen yang banyak digunakan serta membantu para web designer seperti Anda menjadi lebih berkembang dalam membangun tampilan halaman website.
Oke, sampai jumpa pada tutorial selanjutnya hanya di https://www.saungit.web.id/search/label/CSS yang membahas dari dasar hingga tahap CSS master.
Salam,
Saung IT
Comments