Améliorez l'apparence de votre page Web avec un placement précis des objets CSS. Mettre la bordure et les marges à 0, vous permet de mieux contrôler votre espace d'affichage sur l'écran. Voici comment le faire en CSS en l'appliquant sur les balises "Body" et "HTML" de votre page.
Le navigateur Web d'aujourd'hui a parcouru un long chemin depuis les jours fous où toute sorte de cohérence entre les navigateurs était un vœu pieux. Les navigateurs Web d'aujourd'hui sont entièrement conformes aux normes. Ils jouent 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 présents sur les appareils mobiles myriade accéder à des sites aujourd'hui.
Bien que des progrès aient certainement été réalisés dans l'affichage des CSS par les navigateurs , il existe toujours des incohérences entre ces différentes options logicielles. L'une des incohérences les plus courantes est la façon dont ces navigateurs calculent les marges, le remplissage et les bordures par défaut.
Étant donné que ces aspects du modèle de boîte affectent tous les éléments HTML et qu'ils sont essentiels à la création de mises en page, un affichage incohérent signifie qu'une page peut avoir fière allure dans un navigateur, mais être légèrement différente dans un 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 des valeurs pour les marges , le remplissage et les bordures.
Remarque 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 la plupart des concepteurs changent pour répondre aux besoins de conception de leur projet spécifique, le fait qu'ils commencent tous avec les mêmes paramètres par défaut facilite les modifications. 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 les navigateurs.
Normalisation des valeurs pour les "Margin" et "Padding"
La meilleure façon de résoudre le problème du modèle de boîte incohérent est de mettre à zéro toutes les marges et valeurs de remplissage des éléments HTML. Vous pouvez procéder de plusieurs manières en ajoutant cette règle CSS à votre feuille de style :
< style type="text/css" >
body{
margin:0 auto;
}
#header_content{
margin:0 auto;
}
#content{
margin:0 auto;
padding:0px;
}
< /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 rembourrage, vous devrez les réactiver de manière sélective pour des parties spécifiques de votre page Web afin d'obtenir l'apparence et la convivialité requises par votre conception.
Les bordures "Borders"
Les anciennes versions d'Internet Explorer avaient 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 désuètes d'IE, vous devrez résoudre ce problème en ajoutant les éléments suivants à votre corps et à vos styles HTML:
html, body{
margin:0px;
padding:0px;
border: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.
