Peramban web hari ini telah datang jauh dari hari-hari gila di mana segala jenis konsistensi lintas-browser adalah angan-angan. Peramban web saat ini semuanya sangat sesuai standar. Mereka bermain dengan baik bersama-sama dan memberikan tampilan halaman yang cukup konsisten di berbagai browser. Ini termasuk versi terbaru Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari, dan berbagai browser yang ditemukan di berbagai perangkat seluler yang digunakan untuk mengakses situs web hari ini.
Sementara kemajuan sudah pasti dibuat ketika datang ke web browser dan bagaimana mereka menampilkan CSS, masih ada ketidakkonsistenan antara berbagai opsi perangkat lunak ini. Salah satu inkonsistensi umum adalah bagaimana browser tersebut menghitung margin, padding, dan batas secara default.
Karena aspek-aspek ini dari model kotak mempengaruhi semua elemen HTML, dan karena mereka penting dalam membuat tata letak halaman, tampilan yang tidak konsisten berarti bahwa halaman mungkin terlihat bagus dalam satu browser, tetapi terlihat sedikit di yang lain. Untuk mengatasi masalah ini, banyak web designer menormalisasi aspek-aspek dari model kotak. Praktik ini juga dikenal sebagai "memadamkan" nilai-nilai untuk margin, padding, dan batas.
Catatan tentang Default Peramban
Semua browser web memiliki pengaturan default untuk aspek tampilan tertentu dari suatu halaman. Misalnya, hyperlink berwarna biru dan digarisbawahi secara default. Hal ini konsisten di berbagai browser, dan meskipun itu adalah sesuatu yang sebagian besar perancang berubah untuk memenuhi kebutuhan desain proyek khusus mereka, fakta bahwa semuanya dimulai dengan default yang sama membuatnya lebih mudah untuk membuat perubahan ini. Sayangnya, nilai default untuk margin, padding, dan batas tidak menikmati tingkat konsistensi lintas browser yang sama.
Normalisasi Nilai untuk Margin dan Padding
Cara terbaik untuk memecahkan masalah model kotak yang tidak konsisten adalah dengan mengatur semua nilai margin dan padding elemen HTML ke nol. Ada beberapa cara yang dapat Anda lakukan dengan menambahkan aturan CSS ini ke stylesheet Anda:
* {margin: 0; padding: 0; }Aturan CSS ini menggunakan karakter * atau karakter wildcard. Karakter itu berarti "semua elemen" dan pada dasarnya akan memilih setiap elemen HTML dan mengatur margin dan padding ke 0. Meskipun aturan ini sangat tidak spesifik, karena di stylesheet eksternal Anda, ia akan memiliki spesifitas yang lebih tinggi daripada peramban bawaan. nilai lakukan. Karena default tersebut adalah apa yang Anda timpa, gaya yang satu ini akan menyelesaikan apa yang ingin Anda lakukan.
Pilihan lain adalah menerapkan nilai-nilai ini ke HTML dan elemen tubuh. Karena semua elemen lain di halaman Anda akan menjadi anak-anak dari dua elemen ini, cascade CSS harus menerapkan nilai-nilai ini ke semua elemen lainnya.
html, body {margin: 0; padding: 0; }Ini akan memulai desain Anda di tempat yang sama di semua browser, tetapi satu hal yang perlu diingat adalah bahwa setelah Anda mengubah semua margin dan padding, Anda perlu mengaktifkannya kembali secara selektif untuk bagian tertentu dari halaman web Anda untuk mencapai tampilan dan rasakan bahwa desain Anda membutuhkan.
Perbatasan
Anda mungkin berpikir "tetapi tidak ada browser yang memiliki batas di sekitar elemen body secara default". Ini tidak sepenuhnya benar. Versi lama Internet Explorer memiliki perbatasan transparan atau tidak terlihat di sekitar elemen. Kecuali Anda mengatur batas ke 0, batas itu dapat mengacaukan tata letak halaman Anda. Jika Anda telah memutuskan bahwa Anda akan terus mendukung versi IE yang kuno ini, Anda perlu mengalaminya dengan menambahkan hal-hal berikut ke tubuh dan gaya HTML Anda:
HTML, body {
margin: 0px;
padding: 0px;
border: 0px;
}
Mirip dengan bagaimana Anda mematikan margin dan padding, gaya baru ini juga akan mematikan batas default. Anda juga bisa melakukan hal yang sama dengan menggunakan pemilih wildcard yang ditampilkan sebelumnya di artikel.
Artikel asli oleh Jennifer Krynin. Diedit oleh Jeremy Girard pada 9/27/16.