Ce qu'il faut savoir
- Ajoutez une règle à votre feuille de style CSS qui définit toutes les marges et valeurs de remplissage des éléments HTML à zéro.
Cet article explique comment utiliser CSS mettre à zéro marges et des bordures afin que vos pages Web s'affichent de manière cohérente dans chaque navigateur.
Normalisation des valeurs pour les marges et le remplissage
La meilleure façon de résoudre le problème d'un modèle de boîte incohérent est de définir toutes les marges et valeurs de remplissage des éléments HTML à zéro. Il existe plusieurs manières de procéder en ajoutant cette règle CSS à votre feuille de style:
Même si cette règle n'est pas spécifique, car elle se trouve dans votre feuille de style externe, elle aura une spécificité plus élevée que les valeurs par défaut du navigateur. Étant donné que ces valeurs par défaut sont ce que vous écrasez, ce style unique accomplira ce que vous vous apprêtez à faire.
Une fois que vous avez désactivé toutes les marges et le remplissage, vous devrez les réactiver de manière sélective pour des parties spécifiques de votre page Web afin d'obtenir l'apparence que votre conception exige.
Utiliser CSS pour normaliser les bordures
Plus ancien versions d'Internet Explorer avait une bordure transparente ou invisible autour des éléments. À moins que vous ne définissiez la bordure sur 0, cette bordure peut gâcher vos mises en page. Si vous avez décidé de continuer à prendre en charge ces versions obsolètes d'IE, vous devrez résoudre ce problème en ajoutant les éléments suivants à votre corps et à vos styles HTML:
HTML, corps {
marge: 0px ;
remplissage: 0px ;
bordure: 0px ;
}
Semblable à la façon dont vous avez désactivé les marges et le remplissage, ce nouveau style désactivera également les bordures par défaut. Vous pouvez également faire la même chose en utilisant le sélecteur générique présenté plus haut dans l'article.
Pourquoi des marges et des frontières cohérentes sont importantes dans la conception Web
Le navigateur Web d'aujourd'hui a parcouru un long chemin depuis les jours fous où toute sorte de cohérence entre navigateurs était un vœu pieux. Les navigateurs Web d'aujourd'hui sont entièrement conformes aux normes. Ils fonctionnent bien ensemble et offrent un affichage de page assez cohérent sur les différents navigateurs. Cela inclut les dernières versions de Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari et les différents navigateurs trouvés surla myriade d'appareils mobiles accéder aux sites Web aujourd'hui.
Si des progrès ont certainement été réalisés sur la manière dont les navigateurs affichent les CSS, il existe encore des incohérences entre ces différentes options logicielles. L'une des incohérences courantes est la façon dont ces navigateurs calculent les marges, le remplissage et les bordures par défaut.
Parce que ces aspects du modèle de boîte affectent tous les éléments HTML, et parce qu'ils sont essentiels dans la création de page mises en page, un affichage incohérent signifie qu'une page peut avoir fière allure dans un navigateur, mais semble légèrement décalée dans une autre. Pour lutter contre ce problème, de nombreux concepteurs de sites Web normalisent ces aspects du modèle de boîte. Cette pratique est également connue sous le nom de remise à zéro les valeurs des marges, rembourrage, et les frontières.
Une note sur les paramètres par défaut du navigateur
Les navigateurs Web définissent chacun des paramètres par défaut pour certains aspects d'affichage d'une page. Par exemple, les hyperliens sont bleus et soulignés par défaut. Ce comportement est cohérent sur différents navigateurs, et bien que ce soit quelque chose que la plupart des concepteurs modifient pour s'adapter à la conception besoins de leur projet spécifique, le fait qu'ils commencent tous avec les mêmes valeurs par défaut facilite la réalisation de ces changements. Malheureusement, la valeur par défaut des marges, du remplissage et des bordures ne bénéficie pas du même niveau de cohérence entre navigateurs.