CSS: Shorthand-Befehle

Es ist möglich, mehrere CSS-Eigenschaften zu bündeln und in einer Zeile zusammenzufassen, z.B. statt

Selektor {
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
	}

ist folgende Verkürzung möglich:

Selektor {
	margin: 10px;
	}

In folgendem Beispiel sind die Außenabstände jeweils für oben und unten sowie für links und rechts gleich:

Selektor {
	margin-top: 20px;
	margin-right: 10px;
	margin-bottom: 20px;
	margin-left: 10px;
	}

Verkürzt geschrieben:

Selektor {

margin: 20px 10px; /* Der erste Wert zählt für oben und unten, der zweite für links und rechts */

}

Hier die Verkürzung am Beispiel border mit den Eigenschaften border-width (Rahmendicke), border-style (durchgezogen, gepunktet) und Farbe.
Die Langversion:

Selektor {
	border-top-width:1px;
	border-right-width:1px;
	border-bottom-width:1px;
	border-left-width:1px;
	border-style: dotted;
	border-color: #f00;
	}

Die Verkürzung (alle Anweisungen in einer Zeile):

Selektor {
	border:1px dotted #f00;