Rumah >hujung hadapan web >tutorial css >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>
Helaian gaya adalah seperti berikut:
#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:
body { margin: 0; /* Remove body margins */ }
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
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; }
meyerweb.com/eric/tools/css/reset/
github.com/necolas/normalize.css/
html5doctor.com/html- 5 -set semula-stylesheet/
Atas ialah kandungan terperinci Mengapa elemen div saya meninggalkan ruang kosong tambahan, dan bagaimana saya boleh mengalih keluar gaya dan margin CSS lalai?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!