Propriété padding

La propriété css padding permet de définir la marge qui sépare le contenu d'un élément de sa bordure (marge intérieure).

La propriété css padding  peut pendre une valeur numérique suivie de px ou % ou pt ou em.

padding-top

La propriété padding-top permet de définir une marge intérieure haute.
Ici une margin interne haute de 15 pixel entre la bordure haute du cadre et le texte.
Exemple de code css padding-top
.paddingtop {
width: 150px;
height: 150px;
background-color: #000000;
padding-top: 15px;
color: #FFFFFF;
}
Code:
<div class="paddingtop"> mon texte </div>

padding-right

La propriété padding-right permet de définir une marge intérieure droite.
Ici une marge interne droite de 15 pixel entre la bordure droite du cadre et le texte.
Exemple de code css padding-right
.paddingright {
width: 150px;
height: 150px;
background-color: #000000;
padding-right: 15px;
color: #FFFFFF;
}
Code:
<div class="paddingright"> mon texte </div>

padding-bottom

La propriété padding-bottom permet de définir une marge intérieure basse.
Ici une marge interne basse de 15 pixel entre la bordure basse du cadre et le texte.
Exemple de code css padding-bottom
.paddingbottom {
width: 150px;
height: 150px;
background-color: #000000;
padding-bottom: 15px;
color: #FFFFFF;
}
Code:
<div class="paddingbottom"> mon texte </div>

padding-left

La propriété padding-left permet de définir une marge intérieure gauche.
ici une marge interne gauche de 15 pixel entre la bordure gauche du cadre et le texte.
Exemple de oode padding-left
.paddingleft {
width: 150px;
height: 150px;
background-color: #000000;
padding-left: 15px;
color: #FFFFFF;
}
Code:
<div class="paddingleft"> mon texte </div>
On peut également définir une marge intérieure en une seule fois et de valeur égale.
Ici une marge interne égal de 15 pixel entre chaque bordure du cadre et le texte.
Exemple
.padding {
width: 150px;
height: 150px;
background-color: #000000;
padding: 15px;
color: #FFFFFF;
}
Code:
<div class="padding"> mon texte </div>
On peut aussi définir une marge intérieure en une seule fois mais de valeur différente pour chaque côté.
Ici une marge interne haute de 25 pixel et une marge droite de 50 pixel et une marge basse de 5 pixel et enfin une marge gauche de 10 pixel.
Exemple
.paddingmulti {
width: 150px;
height: 150px;
background-color: #000000;
padding: 25px 50px 5px 10px;
color: #FFFFFF;
}
Code:
<div class="paddingmulti"> mon texte </div>
Voir/déposer un commentaire (0) | Signaler un problème