Pourquoi mon élément div laisse-t-il des espaces supplémentaires et comment puis-je supprimer les styles et les marges CSS par défaut ?

Élimination de l'espace de marge et des styles CSS par défaut

Les débutants peuvent rencontrer le problème de l'espace blanc supplémentaire autour des éléments div lorsqu'ils apprennent la programmation pour la première fois. De plus, les propriétés de style telles que les bordures, le remplissage, etc. n'ont aucun effet et ne peuvent pas éliminer les espaces blancs.

Considérez le code suivant :

<div>

La feuille de style est la suivante :

#header_div  {
    background: #0A62AA;
    height: 64px;
    min-width: 500px;
} 
#vipcentral_logo { float:left;  margin: 0 0 0 0; }
#intel_logo      { float:right; margin: 0 0 0 0; }

Cependant, le rendu montre des zones bleues avec les bords du navigateur et les barres d'outils Il y a un espace supplémentaire entre :

[L'image montre un espace supplémentaire]

La clé pour résoudre ce problème est :

Marge par défaut : L'élément body a des marges de 8 px par défaut, ce qui empêche l'élément div d'épouser les bords du navigateur.

Solution :

1. Corps clair Marges :

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

2. Utiliser la réinitialisation globale :

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

3. Plage de réinitialisation limitée :

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

4. Autres Réinitialisation CSS :

meyerweb.com/eric/tools/css/reset/
github.com/necolas/normalize.css/
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!