Bagaimana untuk Menghapuskan Margin Badan Lalai dan Ruang Tambahan dalam HTML/CSS?

Menghapuskan Ruang Margin Sekitar Badan atau Gaya CSS Lalai

Menghadapi ruang tambahan yang tidak diingini mengelilingi elemen boleh mengecewakan. Isu ini timbul disebabkan sifat margin yang wujud pada elemen.

Margin Badan Lalai dalam CSS

Secara lalai, HTML elemen mempunyai margin 8px, menghasilkan ruang di sekeliling kandungan halaman. Untuk membetulkannya, adalah penting untuk mengalih keluar margin ini secara eksplisit menggunakan CSS:

body {
    margin: 0;   /* Eliminate body margins */
}

Tetapan Semula CSS Global

Sebagai alternatif, penyelesaian yang lebih komprehensif ialah menggunakan CSS global set semula. Teknik ini menetapkan semula semua gaya penyemak imbas lalai untuk memastikan titik permulaan yang konsisten dan boleh diramal untuk reka bentuk halaman:

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

Less Global Solution

Jika mahu, anda boleh memilih untuk pendekatan yang kurang global dengan menyasarkan secara khusus elemen berikut:

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

CSS lain Tetapan Semula

Banyak tetapan semula CSS tersedia, termasuk:

• http://meyerweb.com/eric/tools/css/reset/
• https://github.com/necolas/normalize.css/
• http://html5doctor.com/html-5-reset-stylesheet/

Atas ialah kandungan terperinci Bagaimana untuk Menghapuskan Margin Badan Lalai dan Ruang Tambahan dalam HTML/CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!