Bagaimana Saya Menghapuskan Ruang Margin Lalai Sekitar Elemen HTML Menggunakan CSS?

Menghapuskan Ruang Margin Sekitar Elemen: Panduan untuk Mengosongkan Gaya CSS Lalai

Ramai pendatang baru dalam pembangunan web sering menghadapi isu mengecewakan putih berlebihan ruang yang mengelilingi elemen mereka. Secara lalai, elemen dalam HTML mempunyai margin 8px, yang boleh mengakibatkan jarak yang tidak dijangka di sekeliling kandungan. Untuk menangani isu ini, kami menyelidiki dunia gaya CSS.

Mengalih keluar Margin Lalai

Untuk mengalih keluar jidar lalai 8px daripada , cuma tambah peraturan CSS berikut:

body { margin: 0; }

Ini secara berkesan menetapkan sifat margin untuk kepada sifar, menghapuskan ruang tambahan di sekeliling elemen.

Tetapan Semula CSS Global

Pendekatan yang lebih komprehensif untuk mengalih keluar gaya CSS lalai ialah menggunakan tetapan semula CSS. Ini melibatkan penetapan semula semua gaya lalai kepada keadaan neutral, memastikan asas yang konsisten dan boleh diramal untuk reka letak web anda. Tetapan semula CSS yang popular ialah yang disediakan oleh Eric Meyer:

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Tetapan Semula CSS Alternatif

Jika anda lebih suka pendekatan yang kurang global, anda boleh menyasarkan elemen tertentu dan keturunan mereka dengan mengatasi gaya lalai:

html, body, body div, span, ... {
    margin: 0;
    padding: 0;
    border: 0;
    ...
}

CSS tambahan Tetapan Semula

Untuk penyesuaian selanjutnya, anda boleh merujuk kepada sumber seperti:

• Tetapan Semula CSS Eric Meyer: http://meyerweb.com/eric/tools/css/ set semula/
• Normalize.css: https://github.com/necolas/normalize.css/
• Tetap Semula Stylesheet HTML5 Doktor HTML5: http://html5doctor.com/html-5-reset-stylesheet/

Atas ialah kandungan terperinci Bagaimana Saya Menghapuskan Ruang Margin Lalai Sekitar Elemen HTML Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!