Mengapa Margin dan Padding CSS Menggunakan Lebar, Bukan Tinggi, untuk Pengiraan Peratusan?

Mengapa Margin dan Padding dalam CSS Sentiasa Dikira Berbanding Lebar, Bukan Tinggi?

Dalam model kotak CSS, peratusan untuk margin dan padding dikira relatif kepada lebar elemen induk. Keanehan ini timbul daripada saling bergantung antara ketinggian unsur induk dan anak.

Jika peratusan pelapik berdasarkan ketinggian, ia boleh mencipta gelung rekursif. Pertimbangkan elemen dengan pelapik atas 10% berbanding induknya. Pelapik ini akan meningkatkan ketinggian jelas elemen, menjejaskan ketinggian induknya. Walau bagaimanapun, ketinggian ibu bapa bergantung pada ketinggian anak-anaknya dan ketinggian kanak-kanak telah dipengaruhi oleh pelapik ibu bapa.

Hubungan saling bergantung ini sama ada akan mengakibatkan nilai ketinggian tidak tepat atau gelung tak terhingga apabila unsur melaraskan ketinggiannya. berdasarkan yang lain. Untuk mengelakkan ketidakstabilan ini, spesifikasi CSS menentukan bahawa peratusan margin dan pelapik sentiasa merujuk kepada lebar dan bukannya ketinggian.

Keputusan reka bentuk ini mungkin kelihatan berlawanan dengan intuisi, tetapi ia memastikan keselarasan dan kebolehramalan dalam model kotak CSS. Ia menghalang ketinggian daripada dipengaruhi oleh unsur di luar kawalannya, membolehkan pengiraan susun atur yang stabil.

Atas ialah kandungan terperinci Mengapa Margin dan Padding CSS Menggunakan Lebar, Bukan Tinggi, untuk Pengiraan Peratusan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!