Heim >Web-Frontend >CSS-Tutorial >Warum gibt es oben auf meiner Webseite Leerzeichen?
Problem mit HTML-Leerzeichen am Seitenanfang
Leerzeichen am oberen Rand Ihrer Webseite können frustrierend sein. Obwohl wir die Elemente sorgfältig untersucht und keine offensichtliche Ursache gefunden haben, scheint das Problem vom HTML-Element herzurühren.
Um dieses Problem zu beheben, sollten Sie in Betracht ziehen, oben im Stylesheet Ihrer Website einen CSS-Reset hinzuzufügen. Verschiedene Browser stellen Standardränder und -abstände dar, und auch externe Stylesheets können zu unerwartetem Verhalten führen. Ein CSS-Reset setzt alle Elemente auf eine Grundlinie und beseitigt so diese Inkonsistenzen.
Verwenden Sie den folgenden CSS-Reset-Code:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
Update: Universal Selector
Wie von @Frank vorgeschlagen, können Sie den Universal Selector „*“ verwenden, um den Reset-Code zu vereinfachen:
* { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
Dieser Selector ist mit allen gängigen Browsern kompatibel und gewährleistet ein konsistentes Rendering-Erlebnis auf verschiedenen Plattformen.
Das obige ist der detaillierte Inhalt vonWarum gibt es oben auf meiner Webseite Leerzeichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!