Box Model

CSS Box Model
«Sebelumnya
Tonton video tutorial ini
Next Chapter »
CSS Box Model

Semua elemen HTML dapat dianggap sebagai kotak. Dalam CSS, istilah "model kotak" digunakan ketika berbicara tentang desain dan tata letak.

Model kotak CSS pada dasarnya adalah sebuah kotak yang membungkus di sekitar elemen HTML, dan terdiri dari: margin, perbatasan, padding, dan konten yang sebenarnya.

Model kotak memungkinkan kita untuk menambahkan perbatasan sekitar elemen, dan untuk menentukan ruang antara unsur-unsur.

Gambar di bawah ini menggambarkan model kotak:

CSS kotak-Model

Penjelasan dari bagian-bagian yang berbeda:

     Konten - Isi kotak, di mana teks dan gambar muncul
     Padding - Menghapus sebuah daerah di sekitar konten. Padding transparan
     Perbatasan - Sebuah batas yang terjadi di sekitar padding dan konten
     Margin - Menghapus daerah di luar perbatasan. Margin transparan

contoh
div {
     width: 300px;
     padding: 25px;
     border: 25px angkatan laut yang kuat;
     margin: 25px;
}

Cobalah sendiri »

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.
Catatan Penting: Bila Anda mengatur lebar dan tinggi sifat elemen dengan CSS, Anda hanya mengatur lebar dan tinggi area konten. Untuk menghitung ukuran penuh elemen, Anda juga harus menambahkan padding, perbatasan dan margin.

Mari kita membuat elemen div dengan lebar total 350px:
contoh
div {
     width: 320px;
     padding: 10px;
     border: 5px abu-abu padat;
     margin: 0;
}

Cobalah sendiri »

Mari kita melakukan matematika:
320px (lebar)
+ 20px (kiri + kanan padding)
+ 10px (kiri + kanan border)
+ 0px (kiri + margin kanan)
= 350px

Total lebar elemen harus dihitung seperti ini:

Width = Total elemen lebar + bantalan kiri + kanan + bantalan perbatasan kiri + kanan + perbatasan margin kiri + margin kanan

Tinggi total elemen harus dihitung seperti ini:

Tinggi total elemen = tinggi + bantalan atas + bawah bantalan + perbatasan atas + batas bawah + margin atas + margin bawah
Browser Compatibility Isu

Internet Explorer 8 dan versi sebelumnya, termasuk padding dan perbatasan di properti lebar.

Untuk memperbaiki masalah ini, tambahkan <! DOCTYPE html> ke halaman HTML.