Belajar CSS Part 9 Display di dalam CSS

Belajar CSS Part 9 Display di dalam CSS

Assalamualaikum Wr. Wb.

PENGERTIAN

Display merupakan salah satu property yang berada di dalam CSS. Properti ini berfungsi untuk menentukan bagaimana elemen itu di tampilkan. Display di dalam CSS memiliki beberapa fungsi.

Inline berfungsi untuk menentukan letak elemen menjadi ke samping.
Block berfungsi untuk menentukan letak elemen menjadi ke kotak dan kebawah.
Inline-block berfungsi untuk menentukan elemen menjadi ke samping dan ke bawah. Atau bisa disebut sebagai gabungan dari inline & block.
none berfungsi untuk menghilangkan sebuah elemen dan akan muncul apabila mouse berada di atas elemen.

LATAR BELAKANG

Mendalami dan belajar lebih lanjut tentang properti di dalam CSS.

MAKSUD & TUJUAN

Dapat mengendalikan tata letak dari sebuah elemen di dalam web.

Dapat menentukan elemen yang akan di tampilkan.

ALAT & BAHAN

Text Editor
Web Browser
Laptop/PC

LANGKAH KERJA

Yang pertama kita siapkan file dalam bentuk html untuk mencoba properti display tersebut.

Display : inline

Dapat dilihat dari artinya bahwa inline yaitu barisan. Jadi text dalam properti ini akan memiliki letak sebuah barisan. Syntaks yang digunakan yaitu "display:inline;". Untuk lebih jelasnya bisa dilihat pada contoh berikut.

Nb: Untuk syntaksnya saya masukkan di dalam tag <li>, dan kita lihat hasilnya.

Hasilnya akan mengarah secara horizontal atau ke samping. Sudah jelas kan dengan hasilnya.

Display:Block

Dapat dilihat dari artinya yaitu kotak, jadi properti ini akan membuat sebuah display menjadi kotak. Kebalikan dari inline yang hanya mengarah ke samping saja. Display block ini bisa di atur ukurannya sesuai dengan keinginan anda. Untuk lebih jelasnya lihatlah contoh berikut.

Nb: Untuk syntaksnya anda hanya perlu menambahkan property "block" di dalam sebuah tag.

Hasilnya terlihat seperti di atas, hasilnya berkebalikan dengan inline. Anda sudah bisa membedakan mana inline dan mana block.

Display:inline-block

Dapat dilihat dari namanya kita mengetahui bahwa properti ini merupakan gabungan dari properti display:inline dan display:block. Jadi properti ini menggabungkan dua properti tersebut di dalam sebuah tampilan. Untuk lebih jelasnya anda bisa lihat contoh berikut.

Untuk syntaxnya bisa menambahkan properti "inline-block".

Hasilnya mungkin hampir sama dengan inline. Tapi jika datanya banyak hasilnya akan imbang antara kesamping dan kebawah.

Display:none & visibility:hidden

Properti di atas berfungsi untuk menghilankan atau menyembunyikan tampilan dari sebuah elemen. Untuk lebih jelasnya anda bisa melihat contoh berikut.

Nb : Syntaxnya bisa di lihat pada gambar.

Untuk hasilnya hidden teksnya tersembunyi, sedangkan none teksnya tidak ada. Untuk memahami lebih lanjut bisa anda coba properti display ini di Laptop anda.