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

Postingan populer dari blog ini

ethical hacking part 14 membuat malware Trojan

CSS layouting - box model: CSS reset

ethical hacking part 3 reconnaissance & information gethering