Regeln können kombiniert werden, dies erlaubt mehrere Eigenschaften mit einem Regel-Set zu setzen. Der größte Vorteil ist, dass der CSS-Code kürzer wird. Die folgenden beiden Regel-Sets haben exakt die gleichen Auswirkungen:
p
{
padding-top: 1em;
padding-right: 1em;
padding-bottom: 1em;
padding-left: 1em;
}
p { padding: 1em; }
Wenn die Eigenschaften für alle Seiten unterschiedlich sind, kann dennoch die abgekürzte Regel benutzt werden. Die Reihenfolge der einzelnen Werte ist wichtig. Die Werte werden in der folgenden Reihenfolge angewendet: oben, rechts, unten, links – im Uhrzeigersinn beginnend mit oben. Das erste Regel-Set kann beispielsweise folgendermaßen abgekürzt werden:
p
{
padding-top: 1em;
padding-right: 2em;
padding-bottom: 3em;
padding-left: 4em;
}
p { padding: 1em 2em 3em 4em; }
Man kann einen, zwei, drei oder alle vier Werte in einer abgekürzten Regel benutzen. Die folgende Regel z.B. wird padding („Polsterung, der Abstand von eigentlichem Inhalt zum Rahmen) für alle vier Seiten bewirken.
p { padding: 1em; }
Die folgende Regel wird oben und unten 1em padding und 2em an der linken und rechten Seite der Box bewirken.
p { padding: 1em 2em; }
Die folgende Regel wird 1em padding oben, 2em jeweils links und rechts und 3em padding am unteren Rand der Box bewirken.
p { padding: 1em 2em 3em; }
Und die nun folgende Regel wird schließlich 1em padding oben, 2em padding rechts, 3em padding unten und 4em padding am linken Rand der Box bewirken.
p { padding: 1em 2em 3em 4em; }
Die Unterstützung dieser abgekürzten Regeln durch die Browser unterscheidet sich. Für eine detaillierte Übersicht über die Unterstützung durch die jeweiligen Browser sehen Sie bitte im Stylemaster - CSS compatibilty Chart nach.