Gunakan CSS untuk Menghilangkan Margin dan Batas Anda

Artikel ini menjelaskan cara menggunakan CSS menjadi nol margin dan batas sehingga halaman web Anda ditampilkan secara konsisten di setiap browser.

Normalisasi Nilai untuk Margin dan Padding

Cara terbaik untuk memecahkan masalah model kotak yang tidak konsisten adalah dengan mengatur semua margin dan nilai padding elemen HTML ke nol. Ada beberapa cara yang dapat Anda lakukan untuk menambahkan aturan CSS ini ke lembar gaya Anda:

Meskipun aturan ini tidak spesifik, karena ada di lembar gaya eksternal Anda, aturan ini akan memiliki kekhususan yang lebih tinggi daripada nilai browser default. Karena default tersebut adalah apa yang Anda timpa, gaya yang satu ini akan menyelesaikan apa yang ingin Anda lakukan.

Setelah Anda mematikan semua margin dan padding, Anda perlu mengaktifkannya kembali secara selektif untuk bagian tertentu dari halaman web Anda untuk mencapai tampilan dan nuansa yang diinginkan oleh desain Anda.

Gunakan CSS untuk Menormalkan Perbatasan

Lebih tua versi Internet Explorer memiliki batas 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 kuno ini, Anda perlu mengatasinya dengan menambahkan yang berikut ini ke tubuh dan gaya HTML Anda:

HTML, isi {
margin: 0 piksel;
bantalan: 0px;
 batas: 0px;
}

Mirip dengan cara Anda mematikan margin dan padding, gaya baru ini juga akan menonaktifkan batas default. Anda juga dapat melakukan hal yang sama dengan menggunakan pemilih wildcard yang ditunjukkan sebelumnya di artikel.

Mengapa Margin dan Batas yang Konsisten Penting dalam Desain Web

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 sepenuhnya memenuhi standar. Mereka bermain bersama dengan baik 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 ada disegudang perangkat seluler mengakses situs web hari ini.

Meskipun kemajuan telah dicapai dengan cara browser menampilkan CSS, masih ada inkonsistensi antara berbagai opsi perangkat lunak ini. Salah satu ketidakkonsistenan yang umum adalah bagaimana browser tersebut menghitung margin, padding, dan border secara default.

Karena aspek model kotak ini mempengaruhi semua elemen HTML, dan karena mereka penting dalam membuat halaman tata letak, tampilan yang tidak konsisten berarti bahwa halaman mungkin terlihat bagus di satu browser, tetapi terlihat sedikit salah di lain. Untuk mengatasi masalah ini, banyak desainer web menormalkan aspek model kotak ini. Praktek ini juga dikenal sebagai mengabaikan nilai untuk margin, lapisan, dan perbatasan.

Catatan tentang Default Browser

Browser web masing-masing menetapkan pengaturan default untuk aspek tampilan tertentu dari suatu halaman. Misalnya, hyperlink berwarna biru dan digarisbawahi secara default. Perilaku ini konsisten di berbagai browser, dan meskipun itu adalah sesuatu yang sebagian besar desainer ubah agar sesuai dengan desain kebutuhan proyek spesifik mereka, fakta bahwa semuanya dimulai dengan default yang sama membuatnya lebih mudah untuk membuatnya perubahan. Sayangnya, nilai default untuk margin, padding, dan border tidak memiliki tingkat konsistensi lintas-browser yang sama.