Bagaimanakah Saya Boleh Mencipta Div dengan Lebar 100% dan Mengekalkan Margin?

Paparkan Div dengan Lebar dan Margin 100%

Mencipta div dengan lebar 100% sambil mengekalkan margin boleh menjadi satu cabaran. Walau bagaimanapun, terdapat beberapa pendekatan untuk mencapai ini:

float dan calc() Fungsi CSS:

Harta apungan boleh meletakkan div secara mendatar tanpa menjejaskan aliran unsur lain. Fungsi calc() boleh digunakan untuk mengira lebar yang diingini untuk div dengan jidar.

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

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

lapik dan saiz kotak: kotak sempadan

Padding dan saiz kotak juga boleh digunakan untuk mencipta yang diingini kesan:

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

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

Dengan set saiz kotak ke kotak sempadan, padding disertakan dalam pengiraan lebar. Ini memastikan bahawa margin digunakan di luar kawasan empuk.

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