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

HTML White Space Issue at Page Top

Encountering white space at the top of your web page can be frustrating. Despite carefully inspecting elements and finding no apparent cause, the issue seems to stem from the html element.

To address this, consider adding a CSS reset to the top of your website's style sheet. Different browsers render default margins and paddings, and external style sheets may also contribute to unexpected behavior. A CSS reset sets all elements to a baseline, eliminating these inconsistencies.

Use the following 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

As suggested by @Frank, you can use the Universal Selector "*" to simplify the reset code:

* {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }

This selector is compatible with all major browsers, ensuring a consistent rendering experience across different platforms.

The above is the detailed content of Why Is There White Space at the Top of My Web Page?. For more information, please follow other related articles on the PHP Chinese website!