Attribut padding de CSS

Définition et utilisation

L'attribut abrégé marge-interne définit toutes les propriétés de marge interne dans une seule déclaration.

Explication

Cette propriété abrégée définit la largeur de toutes les marges internes de l'élément, ou la largeur des marges internes des côtés. Les marges internes définies sur les éléments en ligne non substitués n'affectent pas le calcul de la hauteur de ligne ; par conséquent, si un élément a à la fois des marges internes et un arrière-plan, il pourrait s'étendre visuellement à d'autres lignes, et pourrait même chevaucher d'autres contenus. L'arrière-plan de l'élément s'étend à travers les marges internes. Les valeurs de marge négatives ne sont pas autorisées.

Remarque :Les valeurs négatives ne sont pas autorisées.

Exemple 1

marge-interne:10px 5px 15px 20px;
  • La marge interne supérieure est de 10px
  • La marge interne droite est de 5px
  • La marge interne inférieure est de 15px
  • La marge interne gauche est de 20px

Exemple 2

marge-interne:10px 5px 15px;
  • La marge interne supérieure est de 10px
  • La marge interne droite et gauche sont de 5px
  • La marge interne inférieure est de 15px

Exemple 3

marge-interne:10px 5px;
  • La marge interne supérieure et inférieure sont de 10px
  • La marge interne droite et gauche sont de 5px

Exemple 4

marge-interne:10px;
  • Les 4 marges internes sont de 10px

Voir également :

Tutoriel CSS :Marge interne CSS

Manuel de référence HTML DOM :Attribut marge-interne

Exemple

Définir les 4 marges internes de l'élément p :

p
  {
  marge-interne:2cm 4cm 3cm 4cm;
  }

Essayer vous-même

Syntaxe CSS

marge-interne: length|initial|hériter;

Valeur de l'attribut

Valeur Description
auto Le navigateur calcule la marge interne.
length Définit la valeur de la marge interne en unité spécifique, comme pixels, centimètres, etc. La valeur par défaut est 0px.
% Définit la marge interne en pourcentage de la largeur de l'élément parent.
hériter Définit que la marge interne doit être héritée de l'élément parent.

Détails techniques

Valeur par défaut : 0
Héritabilité : non
Version : CSS1
Syntaxe JavaScript : object.style.padding="10px 5px"

Essayer sur place

Toutes les propriétés de marge interne dans une seule déclaration
Dans cet exemple, nous montrons comment utiliser les propriétés abrégées pour définir toutes les marges internes dans une seule déclaration, ce qui peut inclure un à quatre valeurs.

Prise en charge du navigateur

Les nombres dans le tableau indiquent la première version du navigateur qui prend en charge cette propriété.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5