Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Menghapuskan Ruang Putih yang Tidak Diingini Sekitar Elemen HTML?

Bagaimanakah Saya Menghapuskan Ruang Putih yang Tidak Diingini Sekitar Elemen HTML?

DDD
Lepaskan: 2024-12-19 12:10:09
asal
904 orang telah melayarinya

How Do I Eliminate Unwanted White Space Around HTML Elements?

Menghapuskan Ruang Putih Di Sekitar Elemen: Menangani Lalai CSS

Dalam reka bentuk web, adalah perkara biasa untuk menghadapi lebihan ruang di sekeliling elemen, walaupun menyatakan sifar jidar dan pelapik. Ini boleh dikaitkan dengan penggayaan lalai yang digunakan pada unsur. Secara lalai, penyemak imbas menambah 8px margin pada setiap sisi badan.

Penyelesaian: Menyesuaikan Badan

Untuk menangani perkara ini, anda boleh mengatasi gaya badan lalai dengan menetapkan margin kepada sifar dalam CSS anda. Ini memastikan tiada ruang tambahan ditambahkan pada badan.

body {
    margin: 0;  /* Remove body margins */
}
Salin selepas log masuk

Alternatif: Tetapan Semula Global

Jika anda lebih suka penyelesaian yang lebih komprehensif, anda boleh melaksanakan global set semula untuk menghapuskan semua penggayaan lalai yang digunakan pada elemen. Ini dicapai dengan mentakrifkan jidar sifar dan pelapik secara eksplisit untuk semua elemen.

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
Salin selepas log masuk

Pilihan Tambahan:

Kurang di peringkat global, anda boleh menyasarkan elemen tertentu untuk menghapuskan margin dan padding, seperti 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;
}
Salin selepas log masuk

CSS Luaran Tetapan Semula:

Sebagai alternatif, anda boleh menggunakan rangka kerja tetapan semula CSS sedia ada seperti:

  • [Tetapan Semula CSS Eric Meyer](http://meyerweb.com/eric/tools /css/reset/)
  • [Nicolas Gallagher's Normalize.css](https://github.com/necolas/normalize.css/)
  • [HTML5Doctor's HTML5 Reset Stylesheet](http://html5doctor.com/html-5-reset-stylesheet/)

Atas ialah kandungan terperinci Bagaimanakah Saya Menghapuskan Ruang Putih yang Tidak Diingini Sekitar Elemen HTML?. 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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan