Bagaimanakah Saya Boleh Membuat Div 100% Lebar Sambil Mengekalkan Margin?

Memaparkan Div dengan 100% Lebar dan Margin

Apabila cuba memaparkan div dengan lebar 100% sambil mengekalkan margin, sifat CSS tertentu boleh dimainkan.

Dalam kod yang disediakan, struktur HTML termasuk div bekas (#page) dan div dalam (#margin) dengan lebar dan jidar 100% yang dikehendaki. Walau bagaimanapun, mengapungkan elemen dan menetapkan lebarnya kepada 100% boleh mengakibatkan div dalam melebihi lebar bekas.

Untuk menangani perkara ini, fungsi CSS calc() boleh digunakan. Dalam kod CSS yang dikemas kini:

#margin {
  width: calc(100% - 10px);
}

Ungkapan ini menolak 10 piksel (lebar jidar yang diingini) daripada lebar yang tersedia, membolehkan div dalam mengembang sepenuhnya dalam bekas sambil menghormati jidar yang ditetapkan.

Sebagai alternatif, daripada menggunakan margin, seseorang boleh menggunakan pelapik dan saiz kotak: sifat kotak sempadan. Apabila menetapkan saiz kotak kepada kotak sempadan, padding disertakan dalam jumlah lebar, menampung kedua-dua lebar dan margin dalam div:

#page {
  padding: 10px;
}

#margin {
  box-sizing: border-box;
  width: 100%;
}

Dengan melaksanakan salah satu daripada penyelesaian ini, ia menjadi mungkin untuk dipaparkan div dengan lebar 100% sambil mengekalkan jidar yang diingini.

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