Tutorial CSS #3 - Pengertian, Penggunaan serta Pemakaian Elemen Block dan Inline di dalam CSS
Tutorial CSS #3 - Pengertian, Penggunaan serta Pemakaian Elemen Block dan Inline di dalam CSS

Tutorial CSS #3 - Pengertian, Penggunaan serta Pemakaian Elemen Block dan Inline di dalam CSS

pengertian elemen block dan inline, penggunaan elemen block dan inline, fungsi elemen block dan inline, pemakaian elemen block dan inline di dalam CSS


SaungIT.web.id – Halo proggrammer’s sekalian! Kali ini kita akan belajar tentang pengertian, penggunaan serta pemakaian elemen block dan inline didalam CSSAyo jujur, apakah Anda sudah mengetahui dengan jelas yang dimaksud dengan elemen block maupun elemen inline? Jika belum, Anda berada pada artikel yang tepat. Karena kami akan menjelaskan secara detail apa itu block maupun apa itu inline.

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
Advertisement

Baca juga:

Your Reactions:

Admin
Wildan Fuady adalah seorang author 20 buku, teacher dan web developer.