Télécharger le PDF du cours
Les marges intérieures se trouvent entre le contenu de l’élément et sa bordure. Ainsi, définir une marge intérieure importante va éloigner la bordure de l’élément de son contenu. Si on définit une couleur de fond pour notre élément, celle-ci s’applique également dans l’espace correspondant aux marges intérieures.
La propriété CSS padding
Nous allons pouvoir ajouter des marges internes à un élément grâce à la propriété CSS padding. Notez déjà que la propriété padding est la version raccourcie des propriétés padding-top, padding-left, padding-bottom et padding-right qui vont servir à définir les marges internes de chaque côté d’un élément.
Ces propriétés vont pouvoir accepter deux types de valeurs :
- Des valeurs de type longueur, généralement en
pxou enem; - Des valeurs de type pourcentage. Dans ce cas, le
%indiqué est calculé par rapport à la taille de l’élément parent.
Notez qu’il n’est pas possible de passer des valeurs de padding négatives.
Ajouter une même marge interne de chaque côté d’un élément
Pour définir une même marge interne de chaque côté d’un élément, il suffit de passer la valeur de la marge intérieure que l’on souhaite appliquer à l’élément à la propriété padding en CSS.
Par exemple, pour appliquer une marge intérieure de 25px de chaque côté d’un élément, on écrira en CSS padding: 25px. Pour que la marge intérieure soit égale à 10% de la taille de l’élément parent de notre élément, on écrira padding: 10% tout simplement.
Pour bien constater l’effet de la propriété padding, je vous conseille d’ajouter une couleur de fond ou une bordure aux éléments pour les exemples suivants.
Notez qu’on va tout aussi bien pouvoir utiliser les propriétés padding-top, padding-left, padding-bottom et padding-right et leur passer la même valeur pour arriver au même résultat. C’est juste plus long à écrire !
See the Pen Cours HTML CSS 5.3.1 by Pierre (@pierregiraud) on CodePen.
Définir des marges internes différentes de chaque côté d’un élément
Nous allons également pouvoir appliquer des marges intérieures de taille différentes de chaque côté d’un élément.
Pour cela, nous avons deux façons de faire : soit en passant plusieurs valeurs à la propriété padding, soit en utilisant les propriétés padding-top, padding-left, padding-bottom et padding-right.
On va en effet pouvoir passer entre 1 et 4 valeurs à la propriété raccourcie padding :
- En passant une valeur à
padding, la valeur passée définira le comportement des 4 marges intérieures de l’élément ; - En passant deux valeurs à
padding, la première valeur passée définira le comportement des marges intérieures supérieure et inférieure de l’élément tandis que la seconde valeur définira le comportement des marges intérieures gauche et droite de l’élément ; - En passant trois valeurs à
padding, la première valeur passée définira le comportement de la marge interne supérieure, la deuxième définira le comportement des marges intérieures gauche et droite tandis que la troisième définira le comportement de la marge interne basse ; - En passant quatre valeurs à
padding, la première valeur passée définira le comportement de la marge interne supérieure, la deuxième définira le comportement de la marge interne droite, la troisième celui de la marge interne basse et la quatrième celui de la marge interne gauche.
Si on choisit d’utiliser les propriétés padding-top, padding-left, padding-bottom et padding-right, il suffit de suivre le nom pour comprendre à quelle marge interne est liée chaque propriété (top = haute, left = gauche, bottom = basse, right = droite).
See the Pen Cours HTML CSS 5.3.2 by Pierre (@pierregiraud) on CodePen.
L’effet du padding sur les éléments environnants
L’ajout de marges internes ou padding va augmenter la taille totale de l’élément. En effet, la valeur donnée au padding va venir s’ajouter à celles des propriétés width et height par défaut.
Regardez plutôt le code ci-dessous pour vous en convaincre :
See the Pen Cours HTML CSS 5.3.3 by Pierre (@pierregiraud) on CodePen.
Ici, on voit clairement que le padding a un impact sur les dimensions totales des éléments, et ceci qu’ils soient de type block ou inline.
Cependant, l’impact sur les éléments environnants ne va pas être le même selon le type d’élément auquel on applique un padding et selon le padding appliqué.
Ici, il y a notamment un cas à noter : celui des marges internes haute et basse d’un élément de type inline. Comme vous pouvez le voir ci-dessus, les marges internes haute et basse sont bien appliquées à mon élément span s1 (on le voit grâce à la couleur en fond de mon élément).
Cependant, le navigateur ne va pas en tenir compte pour l’affichage et le positionnement des autres éléments. C’est la raison pour laquelle notre élément span chevauche le texte des lignes précédente et suivante du paragraphe.
Notez par ailleurs ici les différentes « couches » de texte : la ligne de texte précédent celle du span va se trouver en dessous de lui tandis que la suivante va être au-dessus (on voit que la couleur de fond du span cache le texte précédent mais est sous le texte de la ligne suivante).
Encore une fois, notez que le padding est bien appliqué de chaque côté pour chaque type d’éléments, cependant les padding haut et bas n’auront pas d’impact sur le positionnement d’un élément inline ni sur celui des éléments autour de lui.
