Comment supprimer les bordures d'une page web ?

Joël Brogniart

Première publication mai 2000

Dernière modification mercredi 27 juin 2001 à 8:56.

Normalement le texte et les images qui apparaissent dans la fenêtre d'un navigateur apparaissent toujours décalés de quelques pixels par rapport au bord supérieur gauche de la fenêtre. Mais comment faire pour que les images soient tout à fait au bord ? C'est tout simple, dans la balise BODY il faut mettre les attributs marginwidth, marginheight, leftmargin et topmargin à 0. Ce qui donne quelque chose du genre :

<html lang="FR">
  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title>Test de page sans bordure</title>
  </head>

  <body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0">
    <img height="30" width="640" src="bandeau.jpeg" border="0" alt="bandeau publicitaire">
    <h1>Bandeau au bord</h1>
    <p>Normalement il ne devrait pas y avoir de marge au bord du bandeau lublicitaire.</p>
  </body>
</html>

Voir le résultat du code ci-dessus.

Mais d'où sortent ces attributs ? Là j'avoue mon ignorance, j'ai fait une recherche dans les documentations du HTML versions 2, 3.2 et 4, dans la documentation Javascript et dans les documentations CSS1 et CSS2 et je n'ai rien trouvé. Ces attributs ne sont valides ni en HTML ni en CSS. La manière "correcte" de faire la même chose aurait été d'utiliser les styles. Par exemple en écrivant :

<html lang="FR">
  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title>Test de page sans bordure</title>
    <style type="text/css"><!--
      body {
        margin-top: 0pt;
        margin-left: 0pt;
        padding-top: 0pt;
        padding-left: 0pt;
        border-top: 0pt;
        border-left: 0pt }-->
    </style>
  </head>

  <body>
    <img height="30" width="640" src="bandeau.jpeg" border="0" alt="bandeau publicitaire">
    <h1>Bandeau au bord</h1>
    <p>Normalement il ne devrait pas y avoir de marge au bord du bandeau lublicitaire.</p>
  </body>
</html>

Voir le résulat du code ci-dessus.

Mais malheureusement, l'image n'apparait pas au bord de la fenêtre avec mes navigateurs habituels (iCab et Netscape Navigator). Qu'il est dur de faire du code correct !