Belajar HTML dan CSS part 6

Box Model Pada CSS

Kali ini kita akan belajar mengenai Pemodelan box pada CSS..Apa maksud nya?Lenapa disebut pe,odelan box?.Tenang tenang semuanya akan saya jelaskan

Box model pada css atau dalam bahasa inggris disebut  CSS Box Model  merupakan sebuah konsep yang mana setiap elemen terdapat pada halaman web diproses sebagai kotak(box).Seperti halnya 'Kotak'elemen html ini memiliki 4 jenis bagian.atau lapisan yaitu :content(isi),padding,Border,Margin

Konten atau isi pada element terdapat pada bagian tengah,kita bisa mnegatur lebar dan tinggi konten menggunakan property widh dan height

• Padding merupakan jarak antara konten dengan garis pada ujung atau garis tepi element (Border).Untuk contoh jika kalian membuat teks tanpa padding maka teks tersebut akan percis berada di tepi garis.Gunanya padding adalah Supaya garis teks tidak menyentuh sisi dalam dari sebuah sel tabel..
• Border.Sesuai dengen yang di jelaskan tadi,Bahwa border merupakan garis tepi pembatas element.Kita bisa mengatur berbagai hal di border seperti pewarnaan dan jenis garis yang digunakan.
•  Margin merupakan garis terakhir atau terluar pada box,Margin juga bs=isa diartikan sebagai spasi dari sebuah element dengan element yang lainnya.Margin bersifat transparant fungsinya adalah agar elemet satu dengan yang satu tidak menempel satu sama lain.

Contohnya seperti ini:

div, p, h1 {       width: 300px;       height: 50px;       border: 5px solid red;       margin: 20px;       background-color: yellow;     }