Semua elemen HTML dapat dianggap sebagai kotak. Dalam CSS, istilah "model kotak" digunakan saat membicarakan desain dan tata letak.Model kotak CSS pada dasarnya adalah kotak yang membungkus setiap elemen HTML. Terdiri dari: margin, border, padding, dan konten yang sebenarnya.Gambar di bawah menggambarkan model kotak:
Penjelasan dari bagian bagian:
Konten - Isi kotak, tempat teks dan gambar muncul
Padding - Membersihkan area di sekitar konten. Paddingnya transparan
Border- Perbatasan yang mengelilingi padding dan konten
Margin - Membersihkan area di luar perbatasan. Marginnya transparan
Model kotak memungkinkan kita menambahkan batas di sekitar elemen, dan untuk menentukan ruang antar elemen.
Contoh:
div {Lebar dan Tinggi Elemen
width: 300px;
padding: 25px;
border: 25px solid navy;
margin: 25px;
}
Untuk mengatur lebar dan tinggi elemen dengan benar di semua browser, Anda perlu mengetahui bagaimana model kotak bekerja.Catatan Penting: Bila Anda menetapkan sifat lebar dan tinggi elemen dengan CSS, Anda cukup mengatur lebar dan tinggi area konten. Untuk menghitung ukuran penuh elemen, Anda juga harus menambahkan padding, border dan margin.
Asumsikan kita ingin menata elemen <div> agar memiliki lebar total 350 piksel:
Contoh:
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
Inilah matematikanya:
320 piksel (lebar)+ 20px (padatan kiri + kanan)+ 10px (batas kiri + kanan)+ 0px (margin kiri + kanan)= 350px
Lebar total elemen harus dihitung seperti ini:
Total elemen lebar = lebar + padding kiri + padding kanan + batas kiri + batas kanan + margin kiri + margin kanan
Tinggi total elemen harus dihitung seperti ini:
Total elemen tinggi = tinggi + padding atas + bantalan bawah + batas atas + batas bawah + margin atas + margin bawah
Out Of Topic Show Konversi KodeHide Konversi Kode