Comment éliminer les marges de corps par défaut et l'espace supplémentaire en HTML/CSS ?

Éliminer l'espace de marge autour du corps ou les styles CSS par défaut

Rencontrer un espace supplémentaire indésirable autour d'un élément peut être frustrant. Ce problème se pose en raison des propriétés de marge inhérentes au champ

Marge du corps par défaut en CSS

Par défaut, l'élément HTML L'élément a des marges de 8 px, ce qui laisse un espace autour du contenu de la page. Pour remédier à cela, il est essentiel de supprimer explicitement ces marges à l'aide de CSS :

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

Global CSS Reset

Alternativement, une solution plus complète consiste à utiliser un CSS global réinitialiser. Cette technique réinitialise tous les styles de navigateur par défaut pour garantir un point de départ cohérent et prévisible pour la conception des pages :

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

Solution moins globale

Si vous le souhaitez, vous pouvez opter pour une approche moins globale en ciblant spécifiquement les éléments suivants :

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

Autres CSS Réinitialisations

De nombreuses réinitialisations CSS sont disponibles, notamment :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!