Les marges et le rembourrage peuvent prêter à confusion car, à certains égards, ils ressemblent à la même chose: un espace blanc autour d'une image ou d'un objet. Voici ce que vous, en tant que concepteur Web, devez savoir sur leurs différences.
Remplissage
Le rembourrage est l'espace entre le contenu d'une image ou d'une cellule et sa bordure extérieure. Dans l'image ci-dessous, le rembourrage est la zone jaune autour du contenu. Dans ce cas, le rembourrage fait le tour complet du contenu: haut, bas, droite et gauche. Vous pouvez spécifier la quantité de rembourrage (en pourcentage, pixels, points, etc.) pour chaque côté, et ils ne doivent pas nécessairement être identiques. De cette façon, vous pouvez positionner le contenu dans un élément.
Marges
En revanche, les marges sont les espaces à l'extérieur de la bordure d'un élément, entre l'élément et tout ce qui lui est adjacent. Dans l'image, la marge est la zone blanche à l'extérieur de l'objet entier. Comme le rembourrage, la marge fait le tour complet du contenu dans cet exemple: en haut, en bas, à droite et à gauche. Vous pouvez utiliser des marges pour positionner des divs et d'autres éléments sur une page.
Testez toujours vos pages dans différents navigateurs, systèmes d'exploitation (y compris mobiles) et tailles d'écran pour vous assurer qu'elles s'affichent exactement comme vous le souhaitez.
