Médiaforma

Raccourcissez vos styles CSS margin et padding

Print Friendly

Deux propriétés CSS permettent de définir l’espace autour des éléments de type box : margin et padding :

  • margin définit l’espace entre un élément et les autres éléments qui l’entourent ;
  • padding définit l’espace entre la bordure de l’élément et son contenu.

Il est possible de définir des marges supérieure, inférieure, gauche et droite en accolant (respectivement) les suffixes top, bottom, left et right aux mots-clés margin et padding et en les séparant par un tiret.

Examinons le code suivant :

Deux balises <div> de classe conteneur et interieur sont imbriquées. Ces classes contiennent un peu de texte issu du site http://fr.lipsum.com/.

La classe conteneur définit une couleur d’arrière-plan rose pâle et fixe les dimensions de la balise.

La classe interieur définit une couleur d’arrière-plan jaune pâle, une bordure noire épaisse de deux pixels, des marges extérieures de 10 pixels et des marges intérieures de 40 pixels.

Voici le résultat dans Internet Explorer :

Les quatre marges intérieures étant identiques, les quatre propriétés padding peuvent se résumer à une seule :

padding: 40px;

Il en va de même pour les marges extérieures qui se résument en :

margin: 10px;

Supposons maintenant que nous voulions utiliser les marges intérieures suivantes :

  • Gauche : 40px ;
  • Droite : 41px ;
  • Supérieure : 42 px :
  • Inférieure : 43px.

La forme condensée de la propriété padding sera :

padding: 42px 41px 43px 40px;

Vous voyez donc que les quatre marges sont spécifiées dans l’ordre suivant : haut, gauche, bas et droite. Pour retenir cet ordre, imaginez que vous partez d’en haut et que vous décrivez un cercle dans le sens inverse des aiguilles d’une montre.

Il en va de même en ce qui concerne les marges extérieures. Supposons que nous voulions utiliser les marges extérieures suivantes :

  • Gauche : 10px ;
  • Droite : 11px ;
  • Supérieure : 12 px :
  • Inférieure : 13px.

La forme condensée de la propriété margin sera :

margin: 12px 11px 13px 10px;

Supposons maintenant que les marges extérieures gauche et droite soient identiques et égales à 15 pixels, et que les marges extérieures supérieure et inférieure soient identiques et égales à 20 pixels. La propriété margin pourra être condensée comme ceci :

margin: 20px 15px;

Cette remarque s’applique également aux marges intérieures.

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply