CSS : padding

La propriété CSS padding permet de définir les propriétés des quatre marges intérieures d’un élément en une seule fois.

p {
padding: 20px 20px 20px 20px;
}

Les valeurs renseignés sont de type numérique en %, pt, px ou em.

    Il y a plusieurs possibilités :

  • S’il y a une valeur celle-ci est appliquée à quatre marges intérieures.
  • S’il y a deux valeurs la première est appliquée aux marges intérieures hautes et basses et la deuxième aux marges intérieures droites et gauches.
  • S’il y a quatre valeurs la première est appliquée à une marge intérieure à la fois dans le sens des aiguilles d’une montre en partant de la marge intérieure haute.

Exemple :

CSS
p{
padding:3px 8px 10px 5px;
border:1px solid #00dd00;
}
HTML
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.

2 Commentaires pour cet article.

  1. lie_2_me
    Le 28 juillet 2010 à 09:59.

    it was very interesting to read http://www.web-petit.com
    I want to quote your post in my blog. It can?
    And you et an account on Twitter?

  2. abdi
    Le 28 juillet 2010 à 15:41.

    You can quote web-petit posts on your blog because they are under Creative Commons Licence. My Twitter account : http://twitter.com/webpetit.

Laisser un commentaire