Les règles peuvent être combinées, vous permettant de spécifier plusieurs propriétés avec un jeu de règles. Le plus gros avantage, c'est que votre code CSS devient plus court. Par exemple, les deux jeux de règles suivants ont exactement le même effet :
p
{
padding-top: 1em;
padding-right: 1em;
padding-bottom: 1em;
padding-left: 1em;
}
p { padding: 1em; }
Si les valeurs de propriété sont différentes pour chaque côté, les raccourcis peuvent encore être utilisés. L'ordre de chaque valeur est important. Les valeurs sont appliquées dans l'ordre suivant : haut (top), droite (right), bas (bottom), gauche (left) - dans l'ordre des aiguilles d'une montre, en commençant par le haut. Par exemple, le premier jeu de règles ci-dessous peut être raccourci :
p
{
padding-top: 1em;
padding-right: 2em;
padding-bottom: 3em;
padding-left: 4em;
}
p { padding: 1em 2em 3em 4em; }
Vous pouvez utiliser une, deux, trois ou quatre valeurs dans chaque déclaration courte. Par exemple, la règle suivante appliquera une marge intérieure (padding) à tous les cotés d'une boîte :
p { padding: 1em; }
La règle ci-dessous appliquera une marge intérieure de 1em en haut et en bas, et 2em aux côtés gauche et droite de la boîte.
p { padding: 1em 2em; }
La règle suivante appliquera une marge intérieure de 1em en haut, 2em à gauche et à droite, et 3em en bas de la boite.
p { padding: 1em 2em 3em; }
La règles ci-après appliquera une marge intérieure de 1em en haut, 2em à droite, 3em en bas et 4em à la gauche de la boîte.
p { padding: 1em 2em 3em 4em; }
Le support des règles raccourcies varie selon les navigateurs. Pour un tableau détaillé, voir le diagramme de compatibilité CSS par Stylemaster.