CSS Shorthands

Einige CSS Eigenschaften lassen sich zu kompakten Einzeilern, sogenannten Shorthands, zusammenfassen. Am Beispiel von padding wird die Platz- und Schreib-Ersparnis sichtbar.

.el {
	// lange variante
	padding-top: 20px;
	padding-right: 10px;
	padding-bottom: 15px;
	padding-left: 5px;
	
	// shorthand
	padding: 20px 10px 15px 5px;
}

Vier Zeilen schmelzen zu einer Zeile zusammen. In diesem Beispiel spart das nicht nur Platz, sondern auch Schreibarbeit und dient zudem der Übersichtlichkeit. Im Folgenden sind die wichtigsten Shorthands zur schnellen Übersicht in ihrer korrekten Schreibweise und Reihenfolge aufgeführt. (mehr …)