Bagaimanakah Saya Boleh Mencipta Div Lebar 100% dengan Margin?

Memaparkan Div Lebar 100% Terpinggir

Untuk memaparkan div boleh dikembangkan dengan lebar 100% dan jidar, kaedah berikut boleh bekerja:

Menggunakan calc() Fungsi

Kaedah ini memerlukan sokongan penyemak imbas untuk fungsi CSS calc(). Kod berikut boleh digunakan:

#page {
  background: red;
  float: left;
  width: 100%;
  height: 300px;
}

#margin {
  background: green;
  float: left;
  width: calc(100% - 10px);
  height: 300px;
  margin: 10px;
}

Menggunakan Padding dan Pengukuran Kotak

Kaedah ini memerlukan sokongan penyemak imbas untuk sifat CSS bersaiz kotak dan sempadan- nilai kotak:

#page {
    background: red;
    width: 100%;
    height: 300px;
    padding: 10px;
}

#margin {
    box-sizing: border-box;
    background: green;
    width: 100%;
    height: 300px;
}

Menggunakan pelapik dan saiz kotak: kotak sempadan membenarkan jidar disertakan dalam lebar elemen.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Div Lebar 100% dengan Margin?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!