Mengapakah Peratusan Margin CSS Sentiasa Berdasarkan Lebar Blok yang Mengandungi?

Memahami Peratusan Margin/Padding dalam CSS

Dalam CSS, model kotak mentakrifkan cara margin dan padding dikira berbanding dengan dimensi blok yang mengandungi . Menurut spesifikasi CSS, peratusan margin sentiasa dikira terhadap lebar blok yang mengandungi. Tingkah laku ini meliputi kedua-dua jidar atas dan bawah.

Rasional di sebalik keputusan ini masih tidak jelas, tetapi spekulasi mencadangkan bahawa ia dibuat untuk mengelakkan kemungkinan konflik dengan pengiraan ketinggian elemen induk. Jika peratusan pelapik adalah berdasarkan ketinggian, ia akan menjejaskan ketinggian elemen induk, dan sebaliknya. Ini boleh membawa kepada pengiraan semula ketinggian yang tidak terhingga atau nilai ketinggian yang tidak tepat.

Untuk memahami tingkah laku ini, pertimbangkan contoh praktikal:

<div>

Seperti yang dijangkakan, jidar atas dan kiri div dalam kedua-duanya adalah 10% daripada lebar div luar, iaitu 20px. Walau bagaimanapun, jika peratusan margin adalah berdasarkan ketinggian, jidar atas div dalam ialah 80px, yang akan bercanggah dengan ketinggian 800px yang ditentukan oleh ibu bapa.

Walaupun peratusan margin yang dikira terhadap lebar mungkin kelihatan berlawanan dengan intuitif dalam sesetengah senario, ia mengekalkan ketekalan dalam model kotak CSS dan menghalang potensi masalah pengiraan ketinggian.

Atas ialah kandungan terperinci Mengapakah Peratusan Margin CSS Sentiasa Berdasarkan Lebar Blok yang Mengandungi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!