6.8 Roue des tailles CSS abrégées

Réglage de 4 valeurs

Lorsque les 4 côtés (top, bottom, left and right) sont prises en compte dans une propriété CSS, cette propriété CSS agit également en tant que propriété abrégée.

Par exemple, la propriété padding peut être utilisée seule pour appliquer la même valeur aux 4 côtés, mais existe également en 4 variations (padding-top, padding-bottom, padding-left and padding-right) pour cibler un côté spécifique.

blockquote{ padding:20px;}
/* est équivalent à */ blockquote>{ padding-top: 20px; padding-bottom: 20px; padding-left: 20px; padding-right:20px;}

Mais là où la propriété padding devient intéressante, c’est qu’elle peut obtenir jusqu’à 4 valeurs. Vous pouvez ainsi définir une valeur différente pour tous les côtés à la fois :

blockquote{ padding:20px 0 10px 50px;}

L’ordre est top, right, bottom and left.

Setting 2 or 3 values

En mettant 2 valeurs, la première sera appliquée pour top et bottom, la seconde pour right et left :

blockquote{ padding: 20px 0;}
/*
       top
       20px
left         right
 0             0
      bottom
       20px
*/

Comment se souvenir de l’odre du raccourci

Il existe un moyen simple de se rappeler quelle valeur sera appliquée.

Au lieu de vous concentrer sur les valeurs que vous avez entrées, pensez aux valeurs que vous n’avez pas.

• Si vous entrez 2 valeurs (top/right), vous omettez les réglages bottom et left. Parce que bottom est la contrepartie verticale de top, il utilisera la valeur top. Et comme left est la contrepartie horizontale de right, il utilisera la valeur de right.
• si vous entrez 3 valeurs (top/right/bottom), vous omettez le réglage left. Contrepartie de right, il utilisera sa valeur.

Autres propriétés pouvant faire office de raccourci, « utilisant » le système de la roue

Toute propriété qui s’applique aux 4 côtés :

• margin
• padding
• border-width

“Donc, border est une propriété abrégée qui inclut border-width qui est une autre propriété abrégée ?”

Effectivement border est (dans cet ordre) un raccourci pour :

• border-width
• border-style
• border-color

Cependant, vous ne pouvez pas mélanger les deux :

blockquote { border:1px 0 solid green;}
/* Ne fonctionnera pas */

Mais vous pouvez omettre la largeur dans border et la définir séparément :

blockquote{ border: solid yellow;border-width: 1px 0;}