Ringkasan Model Kisi CSS

Model kotak CSS (Box Model) menentukan bagaimana kotak elemen menangani konten elemen.Padding、Border dan Margin dengan cara.

Ringkasan Model Kisi CSS

Model Kisi CSS

Bagian internal yang paling dalam dari kotak elemen adalah konten yang sebenarnya, yang diiringi oleh padding. Padding menampilkan latar belakang elemen. Latar belakang padding adalah border. Dengan border adalah margin, margin secara default adalah transparan, jadi tidak akan menghalangi elemen yang ada di belakangnya.

Petunjuk:Latar belakang diterapkan untuk area yang terdiri dari konten dan padding, border.

Padding, border, dan margin adalah opsi, nilai standarnya adalah nol. Namun, banyak elemen akan diatur oleh stylesheet agen pengguna. Dapat mengganti gaya browser ini dengan mengatur margin dan padding elemen menjadi nol. Ini dapat dilakukan secara terpisah, atau menggunakan selector umum untuk mengatur semua elemen:

* {
  margin: 0;
  padding: 0;
}

Dalam CSS, width dan height menunjukkan lebar dan tinggi area konten. Menambahkan padding, border, dan margin tidak akan mempengaruhi ukuran area konten, tetapi akan menambahkan ukuran total elemen kotak.

Dengan asumsi bahwa setiap sisi kotak memiliki margin eksternal 10 pixel dan padding internal 5 pixel. Jika ingin elemen kotak ini mencapai 100 pixel, maka lebar konten harus diatur menjadi 70 pixel, lihat gambar di bawah ini:

Contoh Model Kisi CSS 
#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

Petunjuk:Padding, border, dan margin dapat diterapkan untuk semua sisi elemen, atau untuk sisi yang terpisah.

Petunjuk:Margin dapat berupa nilai negatif, dan sering kali margin negatif harus digunakan.

Kemampuan Peramban

Setelah DTD yang tepat untuk halaman disetting, sebagian besar peramban akan menampilkan konten sesuai dengan gambar di atas. Namun, tampilan IE 5 dan 6 adalah yang salah. Menurut spesifikasi W3C, ruang yang diambil oleh konten elemen ditetapkan oleh atribut width, sedangkan nilai padding dan border sekitar konten dihitung secara terpisah. Sayangnya, IE5.X dan 6 menggunakan model standar sendiri dalam mode ganjil. Atribut width di beberapa peramban ini bukan lebar konten, tetapi total lebar konten, padding, dan border.

Meskipun ada cara untuk memecahkan masalah ini. Tetapi solusi terbaik saat ini adalah menghindari masalah ini. Yaitu, jangan menambahkan jarak dalam yang memiliki lebar yang ditentukan untuk elemen, melainkan coba menambahkan jarak dalam atau jarak luar ke elemen induk dan anak elemen.

Terjemahan Istilah

  • element : elemen.
  • padding : jarak dalam, ada pula sumber yang menginterpretasikannya sebagai pengisian.
  • border : garis border.
  • margin : jarak luar, ada pula sumber yang menginterpretasikannya sebagai ruang atau garis ruang.

Pada codew3c, kami sepadan memanggil padding dan margin sebagai jarak dalam dan jarak luar. Ruang yang ada di dalam garis border adalah jarak dalam, dan ruang yang ada di luar garis border adalah jarak luar, mudah diingat kan:)