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
Lepaskan: 2025-01-04 10:41:36
asal
639 orang telah melayarinya

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>
Salin selepas log masuk

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; }
Salin selepas log masuk

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 */
}
Salin selepas log masuk
  1. Gunakan tetapan semula global:
*,
*::before,
*::after { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}
Salin selepas log masuk
  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;
}
Salin selepas log masuk
  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!

sumber:php.cn
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan