Comment puis-je éliminer les espaces blancs indésirables autour des éléments HTML ?

Élimination des espaces blancs autour des éléments : résolution des paramètres CSS par défaut

Dans la conception Web, il n'est pas rare de rencontrer un excès d'espace autour des éléments, malgré la spécification de zéro. marges et remplissage. Cela peut être attribué au style par défaut appliqué au

élément. Par défaut, le navigateur ajoute 8 px de marge de chaque côté du corps.

Solution : personnalisation du corps

Pour résoudre ce problème, vous pouvez remplacer les styles de corps par défaut. en définissant la marge à zéro dans votre CSS. Cela garantit qu'aucun espace supplémentaire n'est ajouté au corps.

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

Alternative : Réinitialisation globale

Si vous préférez une solution plus complète, vous pouvez mettre en œuvre une réinitialisation globale réinitialiser pour éliminer tous les styles par défaut appliqués aux éléments. Ceci est réalisé en définissant explicitement des marges nulles et un remplissage pour tous les éléments.

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

Options supplémentaires :

Moins globalement, vous pouvez cibler des éléments spécifiques pour éliminer les marges et remplissage, tel que le suivant :

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

CSS externe Réinitialisations :

Vous pouvez également utiliser des cadres de réinitialisation CSS existants tels que :

• [Réinitialisation CSS d'Eric Meyer](http://meyerweb.com/eric/tools /css/reset/)
• [Le fichier de Nicolas Gallagher Normalize.css](https://github.com/necolas/normalize.css/)
• [Feuille de style de réinitialisation HTML5 de HTML5Doctor](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!