How to Eliminate Default Body Margins and Extra Space in HTML/CSS?

Eliminating Margin Space Around Body or Default CSS Styles

Encountering unwanted extra space surrounding an element can be frustrating. This issue arises due to the inherent margin properties of the element.

Default Body Margin in CSS

By default, the HTML element has 8px margins, resulting in space around the page content. To rectify this, it's essential to explicitly remove these margins using CSS:

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

Global CSS Reset

Alternatively, a more comprehensive solution is to employ a global CSS reset. This technique resets all default browser styles to ensure a consistent and predictable starting point for page design:

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

Less Global Solution

If desired, you can opt for a less global approach by specifically targeting the following elements:

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

Other CSS Resets

Numerous CSS resets are available, including:

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

The above is the detailed content of How to Eliminate Default Body Margins and Extra Space in HTML/CSS?. For more information, please follow other related articles on the PHP Chinese website!