Belajar properti display pada CSS

 Properti Display pada CSS

• Fungsi

Elemen atau tag HTML ada di suatu kotak. Jadi, properti display ini fungsinya untuk mengatur kotak-kotak tersebut.

• Display: block

Jika kamu menggunakan display block, maka elemen selanjutnya akan muncul di baris yang baru.

Contohnya pada gambar di atas, kata "DUA" muncul di bawah meskipun di samping "SATU" masih banyak tempat kosong. Tag HTML div, h1-h6, p up, li, dll memiliki default display block.

• Display: block

Lebar dan tinggi kotak pada display block bisa kamu sesuaikan. Jika tidak kamu atur, maka lebarnya akan memenuhi lebar browser.

• Display: inline

Berbeda dengan block, jika menggunakan inline maka elemen akan muncul di sampingnya. Tapi, jika kamu menggunakan inline, lebar dan tinggi kotak TIDAK bisa kamu atur ya.

• Display: inline

Lebar kotak jika menggunakan inline akan menyesuaikan dengan panjang konten di dalamnya

Tag HTML span, a, b, dll memiliki default display: inline.

• Display: inline-block

Display ini munculnya sama seperti inline, learners. Tapi dengan inline-block, kamu BISA menyesuaikan lebar dan tinggi kotak.

Sumber: codingstudio.id