Ruang Putih di Bahagian Atas Halaman Anda: Teka-teki CSS Biasa
Adakah anda mendapati diri anda bingung dengan ruang putih misteri yang mengganggu bahagian atas halaman web anda? Jangan takut, kerana ini adalah perangkap biasa dalam reka bentuk web. Begini cara untuk menghapuskannya dan mencapai reka letak yang lancar.
Menyiasat Pesalah
Pertama sekali, adalah penting untuk memeriksa setiap elemen pada halaman anda, termasuk elemen badan. Dalam kes kami, nampaknya ruang putih dikaitkan dengan unsur. Terutama, apabila anda mengalih keluar pengisytiharan, ruang putih hilang.
Penyelesaian Tetapan Semula CSS
Untuk mengatasi isu ini, barisan pertahanan terbaik anda adalah dengan menggunakan tetapan semula CSS pada permulaan anda lembaran gaya laman web. Tindakan ini memulakan slate kosong untuk penggayaan, mengalih keluar sebarang jidar penyemak imbas lalai dan pelapik yang mungkin menyebabkan ruang putih.
Berikut ialah tetapan semula CSS berkesan yang boleh anda gunakan:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
Alternatif Pemilih Universal
Seperti yang dicadangkan oleh Frank, anda boleh memudahkan CSS set semula dengan menggunakan pemilih universal * dan bukannya menyenaraikan elemen individu. Pendekatan ini serasi merentas penyemak imbas:
* { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
Dengan melaksanakan teknik CSS ini, anda boleh mengucapkan selamat tinggal kepada serangan ruang putih di bahagian atas halaman anda, memastikan kehadiran dalam talian yang digilap dan sempurna piksel.
Atas ialah kandungan terperinci Mengapa Terdapat Ruang Putih di Bahagian Atas Halaman Web Saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!