Heim > Web-Frontend > CSS-Tutorial > Warum gibt es oben auf meiner Webseite Leerzeichen?

Warum gibt es oben auf meiner Webseite Leerzeichen?

Barbara Streisand
Freigeben: 2024-11-13 12:05:02
Original
738 Leute haben es durchsucht

Why Is There White Space at the Top of My Web Page?

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;
}
Nach dem Login kopieren

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;
    }
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage