Mengapa Margin dan Padding CSS Dikira Berbanding Lebar?

Mengapa Jidar dan Padding CSS Dikira Berbanding Lebar

Dalam bidang CSS, satu keanehan yang menarik timbul: margin dan padding sentiasa dikira relatif kepada lebar blok yang mengandungi. Keputusan reka bentuk yang penuh teka-teki ini bertentangan dengan jangkaan intuitif, menimbulkan persoalan: mengapa?

Spesifikasi model kotak CSS menyatakan bahawa "peratusan [margin] dikira berkenaan dengan lebar blok yang mengandungi kotak yang dihasilkan." Ketidakkonsistenan ini berlanjutan ke 'margin-top' dan 'margin-bottom', yang berpotensi menyebabkan reka letak tidak ditentukan jika lebar blok yang mengandungi bergantung pada elemen yang dipersoalkan.

Kalau begitu, mengapakah pendekatan tidak konvensional seperti itu akan diterima pakai? Walaupun tiada jawapan muktamad wujud, andaian yang tidak berasas menunjukkan bahawa kuncinya terletak pada penentuan ketinggian unsur.

Ketinggian unsur sering ditakrifkan oleh ketinggian unsur anaknya. Jika elemen induk mempunyai alas pelapik (berbanding ketinggian induk), ia akan memberi kesan kepada ketinggian keseluruhan induk. Walau bagaimanapun, memandangkan ketinggian kanak-kanak bergantung kepada ibu bapa, pergantungan bulat akan berlaku.

Masalah pergantungan ini melangkaui kes pembendungan langsung (imbang induk === ibu bapa). Ketinggian elemen daun (kanak-kanak tanpa kanak-kanak) mempengaruhi semua elemen di atasnya. Oleh itu, pilihan reka bentuk ini memastikan konsistensi dan mengelakkan kemungkinan ralat pengiraan ketinggian.

Atas ialah kandungan terperinci Mengapa Margin dan Padding CSS Dikira Berbanding Lebar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!