Ringkasan Modekan Pemetaan CSS

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

Ringkasan Modekan Pemetaan CSS

Modekan Pemetaan CSS

Bagian paling dalam kotak elemen adalah kandungan sebenarnya, yang di sekelilingi oleh padding. Padding menampilkan latar belakang elemen. Latar belakang padatan padding adalah border. Dengan border adalah margin, margin secara baku adalah transparen, jadi tidak akan menghalangi elemen yang berada di belakangnya.

Petikan:Latar belakang diterapkan kepada area yang terdiri dari kandungan, padding dan border.

Padding, border dan margin adalah pilihan, nilai baku adalah nol. Namun, banyak elemen akan diset oleh laporan pelayar pengguna. Dapat diatasi dengan mengatur margin dan padding elemen menjadi nol. Ini dapat dilakukan secara terpisah, atau menggunakan pemilih umum untuk mengatur semua elemen:

* {
  margin: 0;
  padding: 0;
}

Dalam CSS, width dan height adalah lebar dan tinggi area kandungan. Menambahkan padding, border dan margin tidak akan mempengaruhi ukuran area kandungan, tetapi akan meningkatkan ukuran kotak elemen.

Assumptions untuk setiap sisi kotak adalah 10 pixel margin dan 5 pixel padding. Jika ingin elemen kotak mencapai 100 pixel, perlu mengatur lebar kandungan menjadi 70 pixel, lihat gambar di bawah ini:

Contoh Modekan Pemetaan CSS 
#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

Petikan:Padding, border dan margin boleh diterapkan kepada semua sisi elemen, atau hanya kepada sisi tunggal.

Petikan:Margin boleh berupa nilai negatif, dan dalam banyak kes, margin negatif harus digunakan.

Kemampuan Pelayar

Sekiranya DTD yang sesuai telah diset untuk halaman, kebanyakan pelayar akan memaparkan kandungan seperti di gambar di atas. Walau bagaimanapun, pemaparan IE 5 dan 6 adalah salah. Menurut spesifikasi W3C, ruang yang diambil oleh kandungan elemen ditetapkan oleh atribut lebar, sementara nilai padding dan border di sekeliling kandungan adalah yang lain. Sayangnya, IE5.X dan 6 menggunakan model bukan standar sendiri dalam mode ganjil. Atribut lebar untuk pelayar ini bukan lebar kandungan, tetapi total lebar kandungan, padding dan border.

Walaupun ada cara untuk menyelesaikan masalah ini. Tetapi penyelesaian yang paling baik saat ini adalah menghindari masalah ini. Artinya, jangan tambahkan padding dalam dengan lebar yang ditentukan untuk elemen, melainkan coba menambahkan padding dalam atau padding luar ke elemen induk dan anak elemen.

Terjemahan Istilah

  • element : elemen.
  • padding : padding dalam, juga disebut pengisian.
  • border : bingkai.
  • margin : padding luar, juga disebut kosong atau lebar kosong.

Di codew3c, kami menggabungkan padding dan margin secara seragam sebagai padding dalam dan padding luar. Ruang kosong di dalam bingkai adalah padding dalam, dan ruang kosong di luar bingkai adalah padding luar, mudah diingat kan:）