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?

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

Barbara Streisand
Barbara Streisandasal
2025-01-04 10:41:36633semak imbas

Why is my div element leaving extra whitespace, and how can I remove default CSS styles and margins?

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:

  1. Badan yang jelas Margin:
body { 
    margin: 0;   /* Remove body margins */
}
  1. Gunakan tetapan semula global:
*,
*::before,
*::after { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}
  1. 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;
}
  1. Lain-lain Tetapan semula CSS:

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn