Wie eliminiere ich standardmäßige Textränder und zusätzlichen Platz in HTML/CSS?

Eliminieren des Randraums um den Textkörper oder Standard-CSS-Stile

Es kann frustrierend sein, auf unerwünschten zusätzlichen Platz um ein Element herum zu stoßen. Dieses Problem entsteht aufgrund der inhärenten Randeigenschaften des Element.

Standardtextrand in CSS

Standardmäßig ist der HTML-Code Das Element hat einen Rand von 8 Pixeln, was zu Platz um den Seiteninhalt führt. Um dies zu beheben, ist es wichtig, diese Ränder mithilfe von CSS explizit zu entfernen:

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

Globaler CSS-Reset

Alternativ besteht eine umfassendere Lösung darin, ein globales CSS zu verwenden zurücksetzen. Diese Technik setzt alle Standard-Browserstile zurück, um einen konsistenten und vorhersehbaren Ausgangspunkt für das Seitendesign zu gewährleisten:

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

Weniger globale Lösung

Auf Wunsch können Sie sich dafür entscheiden ein weniger globaler Ansatz, indem gezielt auf die folgenden Elemente abzielt:

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

Anderes CSS Zurücksetzungen

Es sind zahlreiche CSS-Resets verfügbar, einschließlich:

• http://meyerweb.com/eric/tools/css/reset/
• https://github.com/necolas/normalize.css/
• http://html5doctor.com/html-5-reset-stylesheet/

Das obige ist der detaillierte Inhalt vonWie eliminiere ich standardmäßige Textränder und zusätzlichen Platz in HTML/CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!