Mengapa elemen div saya meninggalkan ruang kosong tambahan, dan bagaimana saya boleh mengalih keluar gaya dan margin CSS lalai?

Menghapuskan Ruang Margin dan Gaya CSS Lalai

Pemula mungkin menghadapi masalah ruang putih tambahan di sekeliling elemen div apabila mereka mula-mula mempelajari pengaturcaraan. Selain itu, sifat gaya seperti jidar, pelapik, dsb. tidak mempunyai kesan dan tidak boleh menghapuskan ruang putih.

Pertimbangkan kod berikut:

<div>
<p>Helaian gaya adalah seperti berikut: </p>
<pre class="brush:php;toolbar:false">#header_div  {
    background: #0A62AA;
    height: 64px;
    min-width: 500px;
} 
#vipcentral_logo { float:left;  margin: 0 0 0 0; }
#intel_logo      { float:right; margin: 0 0 0 0; }

Walau bagaimanapun, pemaparan menunjukkan kawasan biru dengan tepi penyemak imbas dan bar alat Terdapat ruang tambahan antara:

[Gambar menunjukkan ruang tambahan]

Kunci untuk menyelesaikan masalah ini ialah:

Jing lalai: Elemen badan mempunyai margin 8px secara lalai, yang menghalang elemen div daripada memeluk tepi penyemak imbas.

Penyelesaian:

1. Badan yang jelas Margin:

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

2. Gunakan tetapan semula global:

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

3. Julat tetapan semula terhad:

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;
}

4. Lain-lain Tetapan semula CSS:

meyerweb.com/eric/tools/css/reset/
github.com/necolas/normalize.css/
html5doctor.com/html- 5 -set semula-stylesheet/