Tutorials / Webentwicklung / Webseiten-Optimierung / Ladezeit verbessern / CSS / Kurzschreibweise (Shorthand) / Margin

Mit CSS die übertragene Datenmenge reduzieren

Die CSS Kurzschreibweise (Shorthand) verwenden

CSS Kurzschreibweise für die Margin-Eigenschaft verwenden

Für die Margin-Eigenschaft, dem Außenabstand eines Elementes, können verschiedene Kurzschreibweisen (auch Shorthand genannt) verwendet werden.

Die Margin-Eigenschaft ist bereits eine Kurzschreibweise für die einzelnen Eigenschaften margin-top, margin-right, margin-bottom und margin-left.

In Abhängigkeit der einzelnen Werte kann die Kurzschreibweise teilweise noch weiter verkürzt werden.

Es sollte immer die kürzmöglichste Variante innerhalb der CSS-Definitionen verwendet werden.


1 Margin-Wert; Oben

.bsp {
        margin-top: 10px;
}

Für nicht angegebene Werte wird der Wert 0 eingesetzt (die Maßangabe entfällt bei Null-Wert).

        margin: 10px 0 0 0;

Zuerst erfolgt die Überprüfung ob das hintere Werte-Paar der gegenüberliegenden Seiten: Right und Left inklusive Maßangaben gleich ist.
Wenn ja, kann der letzte Wert dieses hinteren Werte-Paares weggestrichen werden.

        margin: 10px 0 0 0;

Nur wenn die vorherige Überprüfung identische Werte für das hintere Wert-Paar für Right und Left ergeben hatte, erfolgt anschließend die weitere Überprüfung ob das vordere Werte-Paar der gegenüberliegenden Seiten: Top und Bottom inklusive Maßangaben gleich ist.
Wenn nicht, bleibt das vordere Werte-Paar unverändert so stehen.

        margin: 10px 0 0;
.bsp {
        margin: 10px 0 0;
}
.bsp{margin:10px 0 0}

1 Margin-Wert; Unten

.bsp {
        margin-bottom: 30px;
}

Für nicht angegebene Werte wird der Wert 0 eingesetzt (die Maßangabe entfällt bei Null-Wert).

        margin: 0 0 30px 0;

Zuerst erfolgt die Überprüfung ob das hintere Werte-Paar der gegenüberliegenden Seiten: Right und Left inklusive Maßangaben gleich ist.
Wenn ja, kann der letzte Wert dieses hinteren Werte-Paares weggestrichen werden.

        margin: 0 0 30px 0;

Nur wenn die vorherige Überprüfung identische Werte für das hintere Wert-Paar für Right und Left ergeben hatte, erfolgt anschließend die weitere Überprüfung ob das vordere Werte-Paar der gegenüberliegenden Seiten: Top und Bottom inklusive Maßangaben gleich ist.
Wenn nicht, bleibt das vordere Werte-Paar unverändert so stehen.

        margin: 0 0 30px;
.bsp {
        margin: 0 0 30px;
}
.bsp{margin:0 0 30px}

Hinweis: Die Verwendung der Kurzschreibweise für die Eigenschaft: Margin-Left bringt keinen Vorteil gegenüber der langen Schreibweisen-Variante, im Gegenteil, sie ist sogar kontraproduktiv.

        margin-top: 10px;
        margin: 10px 0 0;

        margin-right: 20px;
        margin: 0 20px 0 0;

        margin-bottom: 30px;
        margin: 0 0 30px;

        margin-left: 40px;
        margin: 0 0 0 40px;

2 Margin-Werte; Oben und Unten sind identisch

.bsp {
        margin-top: 10px;
        margin-bottom: 10px;
}

Für nicht angegebene Werte wird der Wert 0 eingesetzt (die Maßangabe entfällt bei Null-Wert).

        margin: 10px 0 10px 0;

Zuerst erfolgt die Überprüfung ob das hintere Werte-Paar der gegenüberliegenden Seiten: Right und Left inklusive Maßangaben gleich ist.
Wenn ja, kann der letzte Wert dieses hinteren Werte-Paares weggestrichen werden.

        margin: 10px 0 10px 0;

Nur wenn die vorherige Überprüfung identische Werte für das hintere Wert-Paar für Right und Left ergeben hatte, erfolgt anschließend die weitere Überprüfung ob das vordere Werte-Paar der gegenüberliegenden Seiten: Top und Bottom inklusive Maßangaben gleich ist.
Wenn ja, kann der letzte Wert dieses vorderen Werte-Paares ebenfalls weggestrichen werden.

        margin: 10px 0 10px;

Nur wenn bei den beiden vorherigen Überprüfungen identische Werte für die jeweiligen gegenseitigen Werte-Paare gefunden und weggestrichen wurden, bleiben 2 einzelne Werte übrig.

Wenn die Werte-Paare nicht identisch sind, bleiben diese unverändert so stehen.

        margin: 10px 0;
.bsp {
        margin: 10px 0;
}
.bsp{margin:10px 0}

2 Margin-Werte; Oben und Unten sind unterschiedlich

.bsp {
        margin-top: 10px;
        margin-bottom: 30px;
}

Für nicht angegebene Werte wird der Wert 0 eingesetzt (die Maßangabe entfällt bei Null-Wert).

        margin: 10px 0 30px 0;

Zuerst erfolgt die Überprüfung ob das hintere Werte-Paar der gegenüberliegenden Seiten: Right und Left inklusive Maßangaben gleich ist.
Wenn ja, kann der letzte Wert dieses hinteren Werte-Paares weggestrichen werden.

        margin: 10px 0 30px 0;

Nur wenn die vorherige Überprüfung identische Werte für das hintere Wert-Paar für Right und Left ergeben hatte, erfolgt anschließend die weitere Überprüfung ob das vordere Werte-Paar der gegenüberliegenden Seiten: Top und Bottom inklusive Maßangaben gleich ist.
Wenn nicht, bleibt das vordere Werte-Paar unverändert so stehen.

        margin: 10px 0 30px;
.bsp {
        margin: 10px 0 30px;
}
.bsp{margin:10px 0 30px}

2 Margin-Werte; Rechts und Links sind identisch

.bsp {
        margin-right: 20px;
        margin-left: 20px;
}

Für nicht angegebene Werte wird der Wert 0 eingesetzt (die Maßangabe entfällt bei Null-Wert).

        margin: 0 20px 0 20px;

Zuerst erfolgt die Überprüfung ob das hintere Werte-Paar der gegenüberliegenden Seiten: Right und Left inklusive Maßangaben gleich ist.
Wenn ja, kann der letzte Wert dieses hinteren Werte-Paares weggestrichen werden.

        margin: 0 20px 0 20px;

Nur wenn die vorherige Überprüfung identische Werte für das hintere Wert-Paar für Right und Left ergeben hatte, erfolgt anschließend die weitere Überprüfung ob das vordere Werte-Paar der gegenüberliegenden Seiten: Top und Bottom inklusive Maßangaben gleich ist.
Wenn ja, kann der letzte Wert dieses vorderen Werte-Paares ebenfalls weggestrichen werden.

        margin: 0 20px 0;

Nur wenn bei den beiden vorherigen Überprüfungen identische Werte für die jeweiligen gegenseitigen Werte-Paare gefunden und weggestrichen wurden, bleiben 2 einzelne Werte übrig.

Wenn die Werte-Paare nicht identisch sind, bleiben diese unverändert so stehen.

        margin: 0 20px;
.bsp {
        margin: 0 20px;
}
.bsp{margin:0 20px}

3 Margin-Werte; Rechts und Links sind identisch, und Wert für Unten

.bsp {
        margin-right: 20px;
        margin-bottom: 30px;
        margin-left: 20px;
}

Für nicht angegebene Werte wird der Wert 0 eingesetzt (die Maßangabe entfällt bei Null-Wert).

        margin: 0 20px 30px 20px;

Zuerst erfolgt die Überprüfung ob das hintere Werte-Paar der gegenüberliegenden Seiten: Right und Left inklusive Maßangaben gleich ist.
Wenn ja, kann der letzte Wert dieses hinteren Werte-Paares weggestrichen werden.

        margin: 0 20px 30px 20px;

Nur wenn die vorherige Überprüfung identische Werte für das hintere Wert-Paar für Right und Left ergeben hatte, erfolgt anschließend die weitere Überprüfung ob das vordere Werte-Paar der gegenüberliegenden Seiten: Top und Bottom inklusive Maßangaben gleich ist.
Wenn nicht, bleibt das vordere Werte-Paar unverändert so stehen.

        margin: 0 20px 30px
.bsp {
        margin: 0 20px 30px;
}
.bsp{margin:0 20px 30px}

3 Margin-Werte; Rechts und Links sind identisch, und Wert für Oben

.bsp {
        margin-top: 10px;
        margin-right: 20px;
        margin-left: 20px;
}

Für nicht angegebene Werte wird der Wert 0 eingesetzt (die Maßangabe entfällt bei Null-Wert).

        margin: 10px 20px 0 20px;

Zuerst erfolgt die Überprüfung ob das hintere Werte-Paar der gegenüberliegenden Seiten: Right und Left inklusive Maßangaben gleich ist.
Wenn ja, kann der letzte Wert dieses hinteren Werte-Paares weggestrichen werden.

        margin: 10px 20px 0 20px;

Nur wenn die vorherige Überprüfung identische Werte für das hintere Wert-Paar für Right und Left ergeben hatte, erfolgt anschließend die weitere Überprüfung ob das vordere Werte-Paar der gegenüberliegenden Seiten: Top und Bottom inklusive Maßangaben gleich ist.
Wenn nicht, bleibt das vordere Werte-Paar unverändert so stehen.

        margin: 10px 20px 0;
.bsp {
        margin: 10px 20px 0;
}
.bsp{margin:10px 20px 0}

4 Margin-Werte; Alle Werte sind identisch

.bsp {
        margin-top: 25px;
        margin-right: 25px;
        margin-bottom: 25px;
        margin-left: 25px;
}
        margin: 25px 25px 25px 25px;

Zuerst erfolgt die Überprüfung ob das hintere Werte-Paar der gegenüberliegenden Seiten: Right und Left inklusive Maßangaben gleich ist.
Wenn ja, kann der letzte Wert dieses hinteren Werte-Paares weggestrichen werden.

        margin: 25px 25px 25px 25px;

Nur wenn die vorherige Überprüfung identische Werte für das hintere Wert-Paar für Right und Left ergeben hatte, erfolgt anschließend die weitere Überprüfung ob das vordere Werte-Paar der gegenüberliegenden Seiten: Top und Bottom inklusive Maßangaben gleich ist.
Wenn ja, kann der letzte Wert dieses vorderen Werte-Paares ebenfalls weggestrichen werden.

        margin: 25px 25px 25px;

Nur wenn bei den beiden vorherigen Überprüfungen identische Werte für die jeweiligen gegenseitigen Werte-Paare gefunden und weggestrichen wurden, bleiben 2 einzelne Werte übrig.

Wenn die verbliebenen beiden Werte-Paare identisch sind, heißt dies für die Browser-Render-Engine, dass somit auch alle 4 Margin-Einzel-Werte identisch sein müssen.

In diesem Fall kann das gekürzte Werte-Paar für Right und Left entfallen und weggestrichen werden.

        margin: 25px 25px;
.bsp {
        margin: 25px;
}
.bsp{margin:25px}

4 Margin-Werte; Oben und Unten sowie Rechts und Links sind identisch

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

Zuerst erfolgt die Überprüfung ob das hintere Werte-Paar der gegenüberliegenden Seiten: Right und Left inklusive Maßangaben gleich ist.
Wenn ja, kann der letzte Wert dieses hinteren Werte-Paares weggestrichen werden.

        margin: 10px 20px 10px 20px;

Nur wenn die vorherige Überprüfung identische Werte für das hintere Wert-Paar für Right und Left ergeben hatte, erfolgt anschließend die weitere Überprüfung ob das vordere Werte-Paar der gegenüberliegenden Seiten: Top und Bottom inklusive Maßangaben gleich ist.
Wenn ja, kann der letzte Wert dieses vorderen Werte-Paares ebenfalls weggestrichen werden.

        margin: 10px 20px 10px;

Nur wenn bei den beiden vorherigen Überprüfungen identische Werte für die jeweiligen gegenseitigen Werte-Paare gefunden und weggestrichen wurden, bleiben 2 einzelne Werte übrig.

Wenn die Werte-Paare nicht identisch sind, bleiben diese unverändert so stehen.

        margin: 10px 20px;
.bsp {
        margin: 10px 20px;
}
.bsp{margin:10px 20px}

4 Margin-Werte; Rechts und Links sind identisch

.bsp {
        margin-top: 10px;
        margin-right: 20px;
        margin-bottom: 30px;
        margin-left: 20px;
}
        margin: 10px 20px 30px 20px;

Zuerst erfolgt die Überprüfung ob das hintere Werte-Paar der gegenüberliegenden Seiten: Right und Left inklusive Maßangaben gleich ist.
Wenn ja, kann der letzte Wert dieses hinteren Werte-Paares weggestrichen werden.

        margin: 10px 20px 30px 20px;

Nur wenn die vorherige Überprüfung identische Werte für das hintere Wert-Paar für Right und Left ergeben hatte, erfolgt anschließend die weitere Überprüfung ob das vordere Werte-Paar der gegenüberliegenden Seiten: Top und Bottom inklusive Maßangaben gleich ist.
Wenn nicht, bleibt das vordere Werte-Paar unverändert so stehen.

        margin: 10px 20px 30px;
.bsp {
        margin: 10px 20px 30px;
}
.bsp{margin:10px 20px 30px}

4 Margin-Werte; Alle Werte sind unterschiedlich

.bsp {
        margin-top: 10px;
        margin-right: 20px;
        margin-bottom: 30px;
        margin-left: 40px;
}
        margin: 10px 20px 30px 40px;

Zuerst erfolgt die Überprüfung ob das hintere Werte-Paar der gegenüberliegenden Seiten: Right und Left inklusive Maßangaben gleich ist.
Wenn nicht, bleibt das hintere Werte-Paar unverändert so stehen und die weitere Überprüfung des vorderen Werte-Paares entfällt, da bei identischen Werten und anschließender Kürzung des vorderen Werte-Paares die entstehende Kurzschreibweise mit anderen Kurzschreibweisen für Margin kollidieren würde.

Die Browser-Render-Engine hätte bei kollidierenden Kurzschreibweisen keine 100-prozentige Möglichkeit die CSS-Kurzschreibweise - so wie sie beabsichtigt war- wieder korrekt aufzulösen und zu decodieren.

        margin: 10px 20px 30px 40px;
.bsp {
        margin: 10px 20px 30px 40px;
}
.bsp{margin:10px 20px 30px 40px}

Zusammenfassung: Durch die Verwendung der CSS-Kurzschreibweise für die Margin-Eigenschaft kann die Ladezeit von Webseiten durch die verringerte Dateigröße optimiert werden.