Gérer le padding dans les différents browsers

Le problème est le suivant : vous créez une page web avec des div dans tous les sens, des liens, etc. À un moment donné, vous allez vous intéresser à l’aspect de votre page web et rentrez dans votre CSS. Partons du principe, pour l’article, que vous êtes sur du CSS from scratch (vous n’utilisez ni Less, ni Bootstrap, ni aucune feuille de style reset.css trouvée sur le web). Vous créez un certain type de div, disons de la classe « article » en mettant bien que la hauteur du div doit être de 150px et la largeur de 400px (oui, vous le faites en pixels…). Par ailleurs, vous souhaitez que le texte ne colle pas les bords de votre div, aussi mettez-vous un padding de 10px partout. Comme vous n’avez aucun goût, vous décidez de mettre un bord noir d’un pixel d’épaisseur autour de votre div. À ce stade, vous en êtes là :

.article {
  height: 150px;
  width: 400px;
  padding: 10px;
  border: 1px solid #000;
}

Et, pour le HTML :

...
<div class="article">Lorem ipsum dolor sit amet</div>

Comme vous êtes quelqu’un de consciencieux, vous décidez de tester votre magnifique page dans tous les principaux navigateurs. Cette page sort plutôt bien sur l’ensemble de ceux-ci mais, en y regardant de plus près, il apparaît que, sous Safari, votre div est plus grande que sur les autres navigateurs; en effet, les autres navigateurs ont  bien dessiné un div de 150×400 pixels, tandis que Safari en a dessiné un de 170×420 pixels. Il a tout simplement considéré le padding comme une dimensions supplémentaire.

Standards HTML

En matière de boxing (l’art de concevoir des boîtes), tout le monde s’est à peu près mis d’accord pour dire qu’on peut définir une box avec quatre éléments :

  • le margin : c’est l’espace réservé par la box au-dehors de celle-ci (marge externe, si vous voulez);
  • le border : c’est le bord de la box;
  • le padding : c’est la marge comprise entre le bord de la box et la zone de contenu (marge interne);
  • la zone de contenu : c’est la zone que vous pouvez naturellement remplir avec du texte, des images, des liens, d’autres box, etc.

Les standards HTML étant ce qu’ils sont (et, surtout, ayant été ce qu’ils furent par le passé), chaque navigateur a sa propre interprétation de ce qui correspond à quoi, de ce qui prime sur quoi, etc.

Concernant Safari, il considère que les dimensions données à une box sont en fait les dimensions de sa zone de contenu, là où la plupart des navigateurs considèrent que ce sont les dimensions mesurées au bord de la box. Nul ne peut dire qui a raison ou tort, ce n’est qu’une question d’interprétation de ce qu’est une box. En revanche, ce qui importe, c’est de faire en sorte, lorsque vous concevez une page HTML au pixel près,  que l’affichage de celle-ci soit le même indépendamment de l’environnement.

Box-sizing

Il existe une directive CSS (ou plutôt une règle) pour chaque kit de browser qui vous permet de définir une fois pour toutes le comportement des éléments d’une box, c’est le box-sizing.

Dans votre fichier CSS, vous ajoutez, par exemple pour les divs uniquement, le code suivant :

div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.article {
  height: 150px;
  width: 400px;
  padding: 10px;
  border: 1px solid #000;
}

Et le tour est joué.

Regardons de plus près ce code :

-wekbit-box-sizing est une règle du webkit (principalement Safari et Chrome) pour déterminer la mesure des dimensions d’une box ; -moz-box-sizing est l’équivalent Firefox et autres Gecko, tandis que le simple box-sizing vaut pour Opera et Internet Explorer.

La valeur border-box signifie très exactement ce dont on parlait à l’instant, c’est à dire la mesure aux bords de la box.

Indiquons les différentes valeurs possibles de ces règles pour bien comprendre le fonctionnement :

  • content-box : la mesure se fait à l’intérieur du bord d’une box;
  • border-box : la mesure se fait à l’extérieur du bord d’une box (si votre border fait 25px, la différence avec le précédent sera de 50px);
  • padding-box : la mesure se fait uniquement sur la zone de contenu (la padding et le border sont ensuite ajoutés).

Conclusion

Ok, cet article est court et tient plus du Tip que du dossier de fond; mais il illustre surtout, selon moi, le besoin d’aller chercher, dans les kits navigateurs, les subtilités de chacun, les moyens d’obtenir les mêmes résultats sur des environnements différents, etc.

Du coup, je vous invite à visiter les sites suivants (mais également de nombreux autres, tous plus ou moins bien faits, mais qui ont le mérite d’exister) :

Une réponse à to “Gérer le padding dans les différents browsers”

  • Merci pour cette article, elle relève indirectement la difficulté de trouver un compromis entre tous les moteurs. Je me vois souvent contraint d’agencer une règle pour Firefox car il me rajoute 3 pixels sur un select… Un jour peut-être, le consortium des navigateurs respectera les standards pour ne plus voir ces absurdités de -webkit, -moz et autre hack pour qu’un site soit identique.
    Dernier point, il faut aussi se méfier du padding qui a ce pouvoir d’agrandir une box de l’intérieur.