Pelayar web hari ini telah datang jauh dari hari-hari gila di mana apa-apa jenis konsisten silang pelayar adalah pemikiran anging. Pelayar web hari ini adalah semua mematuhi piawaian. Mereka bermain dengan baik dan menyampaikan paparan halaman yang agak konsisten merentasi pelbagai penyemak imbas. Ini termasuk versi terbaru Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari, dan pelbagai pelayar yang terdapat pada pelbagai peranti mudah alih yang digunakan untuk mengakses laman web hari ini.
Walaupun kemajuan sudah tentu dibuat ketika datang ke pelayar web dan bagaimana mereka memaparkan CSS, masih terdapat ketidakkonsistenan antara berbagai pilihan software ini. Salah satu ketidakkonsistenan yang biasa ialah bagaimana penyemak imbas tersebut mengira margin, padding, dan sempadan secara lalai.
Kerana aspek-aspek model kotak ini mempengaruhi semua elemen HTML, dan kerana mereka adalah penting dalam membuat susun atur halaman, paparan yang tidak konsisten bermaksud bahawa halaman mungkin kelihatan hebat dalam satu pelayar, tetapi kelihatan sedikit di sisi lain. Untuk memerangi masalah ini, banyak pereka web menormalkan aspek-aspek model kotak ini. Amalan ini juga dikenali sebagai "zeroing out" nilai untuk margin, padding, dan sempadan.
Nota pada Lalai Pelayar
Pelayar web semuanya mempunyai tetapan lalai untuk aspek paparan tertentu halaman. Sebagai contoh, hiperpautan berwarna biru dan digariskan secara lalai. Ini konsisten merentasi pelbagai penyemak imbas, dan walaupun ia adalah sesuatu yang kebanyakan pereka perubahan berubah sesuai dengan keperluan reka bentuk projek khusus mereka, hakikat bahawa mereka semua bermula dengan kegagalan yang sama menjadikannya lebih mudah untuk membuat perubahan ini. Malangnya, nilai lalai untuk margin, padding, dan sempadan tidak menikmati tahap seragam pelayar yang sama.
Nilai-nilai Normalization untuk Margin dan Padding
Cara terbaik untuk menyelesaikan masalah model kotak tidak konsisten adalah untuk menetapkan semua margin dan padding nilai elemen HTML menjadi sifar. Terdapat beberapa cara yang boleh anda lakukan ini ialah untuk menambah peraturan CSS ini pada lembaran gaya anda:
* {margin: 0; padding: 0; }Peraturan CSS ini menggunakan aksara * atau wildcard. Watak itu bermaksud "semua elemen" dan ia pada asasnya akan memilih setiap elemen HTML dan menetapkan margin dan padding ke 0. Walaupun peraturan ini sangat tidak jelas, kerana ia berada dalam lembaran gaya luaran anda, ia akan mempunyai kekhususan yang lebih tinggi daripada pelayar lalai nilai lakukan. Memandangkan orang yang ingkar adalah apa yang anda tukar ganti, gaya ini akan mencapai apa yang anda ingin lakukan.
Pilihan lain adalah untuk menerapkan nilai-nilai ini kepada elemen HTML dan badan. Kerana semua elemen lain pada halaman anda akan menjadi anak-anak dari kedua elemen ini, kasino CSS harus menerapkan nilai-nilai ini kepada semua unsur-unsur lain.
html, badan {margin: 0; padding: 0; }Ini akan memulakan reka bentuk anda di tempat yang sama pada semua pelayar, tetapi satu perkara yang harus diingati ialah apabila anda menghidupkan semua margin dan padding, anda perlu memilihnya secara terpilih untuk bahagian tertentu halaman web anda untuk mencapai rupa dan merasakan bahawa reka bentuk anda memerlukan.
Sempadan
Anda mungkin berfikir "tetapi tiada pelayar mempunyai sempadan di sekeliling elemen badan secara lalai". Ini tidak benar. Versi Internet Explorer yang lebih tua mempunyai sempadan yang telus atau tidak kelihatan di sekeliling unsur. Kecuali anda menetapkan sempadan ke 0, sempadan tersebut boleh merosakkan susun atur halaman anda. Jika anda telah memutuskan bahawa anda akan terus menyokong versi-versi kuno IE ini, anda perlu menangani ini dengan menambah yang berikut untuk gaya badan dan HTML anda:
HTML, badan {
margin: 0px;
padding: 0px;
sempadan: 0px;
}
Sama seperti cara anda mematikan margin dan padding, gaya baru ini juga akan mematikan sempadan lalai. Anda juga boleh melakukan perkara yang sama dengan menggunakan pemilih kad liar yang dipaparkan di awal artikel.
Artikel asal oleh Jennifer Krynin. Disunting oleh Jeremy Girard pada 9/27/16.