CSS Box Model
Semua elemen HTML dapat dianggap sebagai kotak. Dalam CSS, istilah "model kotak" digunakan ketika berbicara tentang desain dan tata letak.
Kotak CSS Model pada dasarnya adalah sebuah kotak yang membungkus di sekitar setiap elemen HTML. Ini terdiri dari: margin, perbatasan, padding, dan konten yang sebenarnya.
Gambar di bawah mengilustrasikan model kotak:
Penjelasan dari bagian-bagian yang berbeda:
- Konten - Isi kotak, di mana teks dan gambar muncul
- Padding - Menghapus sebuah daerah di sekitar konten.padding transparan
- Border - Sebuah perbatasan yang terjadi di sekitar padding dan konten
- Margin - Menghapus sebuah daerah di luar perbatasan.margin transparan
Model kotak memungkinkan kita untuk menambahkan perbatasan sekitar elemen, dan untuk menentukan ruang antara unsur-unsur.
Lebar dan Tinggi dari Elemen
Dalam rangka untuk mengatur lebar dan tinggi dari suatu elemen dengan benar di semua browser, Anda perlu tahu bagaimana model kotak bekerja.
 | Penting: Bila Anda mengatur lebar dan tinggi sifat suatu unsur dengan CSS, Anda hanya mengatur lebar dan tinggi area konten.Untuk menghitung ukuran penuh elemen, Anda juga harus menambahkan padding, perbatasan dan margin. |
|---|
Asumsikan kita ingin untuk gaya <div> elemen untuk memiliki lebar total 350px:
Berikut adalah matematika:
Total lebar elemen harus dihitung seperti ini:
Jumlah elemen width = lebar + bantalan kiri + bantalan kanan + batas kiri + batas kanan + margin kiri + margin kanan
Tinggi total elemen harus dihitung seperti ini:
Tinggi total elemen = tinggi + padding atas + bantalan bawah + batas atas + batas bawah + margin atas + margin bawah
| Catatan untuk IE tua: Internet Explorer 8 dan versi sebelumnya, termasuk padding dan perbatasan di width properti. Untuk memperbaiki masalah ini, tambahkan <!DOCTYPE html> ke halaman HTML. |
|---|
Uji Diri dengan Latihan!
Latihan 1 » Latihan 2» Latihan 3 » Latihan 4»