Attribut PADDING

Rôle

L’attribut padding permet d’appliquer une marge interne à l’élément HTML (dans l’ordre : en haut, à droite, en bas et à gauche).

Cet attribut est le raccourci de padding-left qui spécifie la marge interne à gauche, padding-right qui spécifie la marge interne à droite, padding-top qui spécifie la marge interne en haut et padding-bottomqui spécifie la marge interne en bas

Cet attribut peut prendre plusieurs valeurs possibles :

* 4 valeurs pour pouvoir gérer toutes les marges séparément : dans l’ordre ‘top-droite-bas-gauche’

padding : 10px 20px 10px 20px ;

* 3 valeurs : la quatrième valeur (la marge de gauche) a la même valeur que la deuxième valeur (la marge de droite)padding : 10px 20px 10px ;

* 2 valeurs : la première pour les marges haut-bas, la deuxième pour les marges droite-gauche

padding : 10px 20px ;

* 1 même valeur pour les quatres margespadding : 10px ;

Version : CSS1

Héritage (inherit) : non

Propriété Javascript : element.style.padding

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

div{
  width: 300px;
  padding: 20px;
  background-color: silver;
}

– Le code HTML

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, suscipit! Culpa mollitia quae quo architecto corrupti vitae, laboriosam distinctio, ex aperiam odio quam officia perferendis voluptate.Debitis nihil excepturi culpa!</div>

 

Résultat

Compatibilité

navigateur-chromenavigateur-firefoxnavigateur-ienavigateur-safarinavigateur-opera

L’attribut padding est pris en charge par tous les principaux navigateurs

Valeurs

Les différentes valeurs de l’attribut padding sont:

length
Définit une valeur en px, pt, cm, em.
Syntaxe :
padding : 20px
pourcentage
Définit une valeur en pourcentage par rapport à l’élément parent.
Syntaxe :
padding : 30%
initial
Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécificité.
Syntaxe :
padding : initial
inherit
Hérite de la même propriété que l’élément parent.
Syntaxe :
padding : inherit

A voir aussi

border box-sizing clip height width margin padding overflow max-width min-width outline resize