Css layouting - display
Css layouting - display
<div> Dan <span>
Tag di html digunakan untuk memberikan maksud arti pada sebuah konten contoh nya p untuk paragraf Dan h1 untuk heading
Namun tag div Dan span tidak memiliki arti apapun kedua nya digunakan untuk mengelompokan tag tag html Dan memberikan informasi terhadap tag tag tersebut.
Apa hubungan nya div Dan span dengan display ?
Jadi kedua tag ini memiliki properti display , sebenarnya semua elemet. Mempunyai display default nya
div itu display nya block
Dan span itu display nya inline
Kita masuk ke css display
Setiap tag pada html berada di dalam sebuah kotak. properti display pada css Mengatur prilaku dari kotak tersebut.
Dan setiap tag di html memiliki Nilai default untuk property display. Tetapi Kita juga dapat mengubah prilaku dari tag tersebut dengan mengganti value nya.
Value dari display ini Ada 4
1.inline
a.Element yang secara default tidak menambahkan baris baru ketika dibuat
b.lebar Dan tinggi element nya sebesar konten yang Ada didalam nya
c.kita tidak dapat Mengatur tinggi Dan lebar dari element inline
d.margin Dan padding hanya mempengaruhi element secara horizontal tidak vertikal
Element html inline:
b,strong,i,em,a,span,sub,sup,button,input, label,select,textarea
2.inline-block
a.tidak Ada element yang secara default memiliki properti display block
b.kita harus ubah secara manual property tersebut
c.prilaku dasarnya sama dengan elemen inline
d.perbedaan nya inline block dapat Kita atur tinggi Dan lebar nya
3.block
a.element html yang secara default menambahkan baris baru ketika dibuat
b.jika tidak diatur lebar nya maka lebar default dari element block akan memenuhi lebar dari browser/parent nya
c.kita dapat Mengatur tinggi Dan lebar dari element block
d.didalam element block Kita dapat menyimpan tag dengan element inline , inline block,atau bahkan element block lagi.
Contoh element block:
h1-h6, p,ol,ul,li,form,hr,div,
4.none
Dan none itu ketika Kita ingin tidak memunculkan sebuah element
Komentar
Posting Komentar