Propriété padding

La propriété padding définit la marge intérieure d'un élément. Les valeurs de la propriété sont exprimées dans n'importe quelle unité de taille. Par défaut, chaque navigateur peut ajouter des marges différentes aux éléments. Cette propriété est un raccourci pour les propriétés padding-top, padding-right, padding-bottom, padding-left.

Syntaxe

sélecteur {
	padding: valeur;
}

La propriété padding accepte 1, 2, 3 ou 4 valeurs, séparées par un espace :

Nombre	Description
`1`	Une valeur définit la marge sur tous les côtés de l'élément.
`2`	La première valeur définit la marge en haut et en bas, et la seconde - à droite et à gauche.
`3`	La première valeur définit la marge en haut, la seconde - à droite et à gauche, et la troisième - en bas.
`4`	La première valeur définit la marge en haut, la seconde - à droite, la troisième - en bas, et la quatrième - à gauche.

Dans ce cas, par défaut, la marge intérieure sera nulle et le texte sera collé à la bordure du bloc :

<div id="elem">
	some long text
</div>

#elem {
	padding: 0;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}

Maintenant, définissons une marge intérieure de 30px :

<div id="elem">
	some long text
</div>

#elem {
	padding: 30px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}

Maintenant, la marge en haut et en bas sera de 20px, et à droite et à gauche - de 5px :

<div id="elem">
	some long text
</div>

#elem {
	padding: 20px 5px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}

Maintenant, la marge en haut est de 5px, à droite - de 15px, en bas - de 25px, à gauche - de 35px :

<div id="elem">
	some long text
</div>

#elem {
	padding: 5px 15px 25px 35px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}