CSS Shorthands - Innen- und Außenabstand

Dies ist der zweite Teil meiner Artikel-Serie über CSS-Shorthands. Im ersten Teil habe ich nur eine kleine Einführung zu diesem Thema gegeben und hier geht es direkt ans Eingemachte.

Der Innenabstand, besser bekannt als padding und der Außenabstand alias margin sind zwei sehr populäre Beispiele für effektive Shorthands. Hier nun auch direkt das Beispiel dazu:

/* Erst mal die umständliche Ausführung */
element {
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 30px;
	padding-left: 40px;
}

/* Dann die kurze Variante */
element {
	padding: 10px 20px 30px 40px;
}

Bei margin gilt genau die gleiche Syntax

Bei padding und margin werden die einzelnen Werte immer in einer bestimmten Reihenfolge angegeben, die ich nun zeigen will:

element {
	padding: oben rechts unten links;
}

Das allein ist noch nicht sehr spannend, denn das wird es erst, wenn man die Kürzung noch weiter kürzt. So kann z.B. folgendes Konstrukt noch stärker gekürzt werden:

/* Erst mal die umständliche Ausführung */
element {
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
}

/* Dann die kurze Variante */
element {
	margin: 10px auto;
}

Hierbei wird für oben und unten jeweils der Wert 10px genutzt und für rechts und links auto. Man muss also nicht immer alle Werte für alle Positionen befüllen. Man kann von einem Wert aufwärts bis zu maximal vier Werten gehen. Die letzen beiden Möglichkeiten werde ich jetzt noch zeigen:

/* Erst mal die umständliche Ausführung für einen gleichmäßigen Abstand */
element {
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
}

/* Dann die kurze Variante für einen gleichmäßigen Abstand */
element {
	margin: 10px;
}

Hiermit bekommt man auf allen vier Seiten eines Elementes einen gleichmäßigen Abstand von jeweils 10 Pixel. Und damit komme ich auch schon zur wohl unbekanntesten und am wenigsten genutzten Variante. Der mit drei Werten.

element {
	margin-top: 10px;
	margin-right: 20px;
	margin-bottom: 30px;
}

element {
	margin: 10px 20px 30px;
}

Damit bekommt man oben einen Abstand von 10 Pixel, rechts von 20 Pixel und unten von 30 Pixel. Ein Abstand nach links existiert bei dieser Notation nicht.

Dies war auch schon der zweite Teil meiner Serie über CSS Shorthands. Fragen, Anregungen, Kritik ist immer gern gesehen. Vielleicht habe ich ja auch etwas vergessen.

Hier nun eine Liste der weiteren Artikel, die sich in dieser Serie befinden:

CSS Shorthands – Innen- und Außenabstand

2 Kommentare