Wie eliminiere ich unerwünschte Leerräume um HTML-Elemente?

Leerraum um Elemente eliminieren: CSS-Standardwerte berücksichtigen

Beim Webdesign ist es nicht ungewöhnlich, dass trotz der Angabe von Null zu viel Platz um Elemente herum vorhanden ist Ränder und Polsterung. Dies kann auf den Standardstil zurückgeführt werden, der auf den

Element. Standardmäßig fügt der Browser auf jeder Seite des Körpers 8 Pixel Rand hinzu.

Lösung: Anpassen des Körpers

Um dieses Problem zu beheben, können Sie die Standardkörperstile überschreiben indem Sie den Rand in Ihrem CSS auf Null setzen. Dadurch wird sichergestellt, dass dem Körper kein zusätzlicher Platz hinzugefügt wird.

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

Alternative: Global Reset

Wenn Sie eine umfassendere Lösung bevorzugen, können Sie einen globalen Reset implementieren Zurücksetzen, um alle auf Elemente angewendeten Standardstilisierungen zu entfernen. Dies wird erreicht, indem für alle Elemente explizit Null-Ränder und -Auffüllungen definiert werden.

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

Zusätzliche Optionen:

Weniger global können Sie auf bestimmte Elemente abzielen, um Ränder zu eliminieren und Auffüllen wie folgt:

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

Externes CSS Zurücksetzungen:

Alternativ können Sie vorhandene CSS-Reset-Frameworks verwenden wie:

• [Eric Meyer's CSS Reset](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/)

Das obige ist der detaillierte Inhalt vonWie eliminiere ich unerwünschte Leerräume um HTML-Elemente?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!