Propriété padding Style

Définition et utilisation

padding Cette propriété définit ou retourne la marge interne de l'élément.

Cette propriété peut accepter une à quatre valeurs :

Attribut margin et Attribut padding Toutes sont insérées autour de l'élément. Cependant, la différence réside en ce que la marge insère de l'espace autour de la bordure, tandis que la marge interne insère de l'espace à l'intérieur de la bordure de l'élément.

  • Une valeur, par exemple : div {padding: 50px} - toutes les quatre marges auront une marge interne de 50px
  • Deux valeurs, par exemple : div {padding: 50px 10px} - les marges supérieure et inférieure seront de 50px, et les marges gauche et droite seront de 10px
  • Trois valeurs, par exemple : div {padding: 50px 10px 20px} - la marge interne supérieure est de 50px, les marges internes gauche et droite sont de 10px, et la marge interne inférieure est de 20px
  • Quatre valeurs, par exemple : div {padding: 50px 10px 20px 30px} - la marge interne supérieure est de 50px, la marge interne droite est de 10px, la marge interne inférieure est de 20px, et la marge interne gauche est de 30px

Voir également :

Tutoriel CSS :Marge interne CSS

Manuel de référence CSS :Attribut padding

Exemple

Exemple 1

Définir la marge interne de l'élément <div> :

document.getElementById("myDiv").style.padding = "50px 10px 20px 30px";

Essayer par vous-même

Exemple 2

Change la marge interne de tous les quatre côtés de l'élément <div> en "25px" :

document.getElementById("myDiv").style.padding = "25px";

Essayer par vous-même

Exemple 3

Retourne la marge interne de l'élément <div> :

alert(document.getElementById("myDiv").style.padding);

Essayer par vous-même

Exemple 4

Difference entre les attributs margin et padding :

function changeMargin() {
  document.getElementById("myDiv").style.margin = "100px";
}
function changePadding() {
  document.getElementById("myDiv2").style.padding = "100px";
}

Essayer par vous-même

Syntaxe

Retourner l'attribut padding :

object.style.padding

Définir l'attribut padding :

object.style.padding = "%|length|initial|inherit"

Valeur de l'attribut

Valeur Description
% Padding defined by percentage of the parent element's width.
length Padding defined by length units.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Détails techniques

Valeur par défaut : 0
Valeur de retour : Chaîne, représentant la marge interne de l'élément.
Version CSS : CSS1

Navigateur pris en charge

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support