Mengapa Margin atau Padding Terakhir Saya Runtuh dalam Flexbox/Layout Grid?

Margin Terakhir / Padding Runtuh dalam Flexbox / Reka Letak Grid

Flexbox dan susun atur grid ialah alatan berkuasa untuk mengatur elemen UI. Walau bagaimanapun, ia boleh membawa kepada tingkah laku yang tidak dijangka, seperti keruntuhan jidar atau pelapik terakhir.

Potensi Masalah #1: Limpahan

Dalam susun atur kotak flex atau grid , sifat limpahan tidak digunakan pada margin atau padding. Ini bermakna jika elemen kanak-kanak mempunyai jidar atau padding yang digunakan, ia tidak akan runtuh dengan jidar atau padding elemen jiran.

Untuk menyelesaikan isu ini, pastikan sifat limpahan tidak ditetapkan kepada tersembunyi. Jika perlu untuk menyembunyikan limpahan, gunakan sifat "overflow-x" atau "overflow-y".

Potensi Masalah #2: Model Kotak CSS

Model Kotak CSS menentukan bahawa sifat limpahan hanya digunakan pada kawasan kotak kandungan. Jidar dan pelapik terletak di luar kawasan ini dan tidak terjejas oleh sifat limpahan.

Jika jidar atau pelapik runtuh secara tidak dijangka, pastikan tiada limpahan dalam kotak kandungan. Jika terdapat limpahan, tetapkan sifat limpahan kepada tersembunyi pada elemen anak.

Atas ialah kandungan terperinci Mengapa Margin atau Padding Terakhir Saya Runtuh dalam Flexbox/Layout Grid?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!