CSS : margin, padding dans quel sens ça tourne ?

Enfin une question concernant la CSS qu’on m’a posée hier et à laquelle je m’empresse de répondre.
Comment interpréter les valeurs des raccourcis des margin et padding ?

Le margin définit les marges extérieures d’un container, le padding les marges intérieures.

Exemple : le margin et le padding sont appliqués à l’élément rouge.

Dans ce cas, le margin positionne l’élément rouge par rapport aux limites de l’élément noir parent, le padding positionne le contenu de l’élément rouge par rapport à ses propres limites.

Alors, dans quel sens tournent les valeurs des margin et padding ?
Et bien dans celui des aiguilles d’une montre en commençant par le haut : top (haut) - right (droit) - bottom (bas) - left (gauche)

margin: 1em 0.5em 0.8em 0;

équivaut à :

margin-top:1em;margin-right:0.5em;margin-bottom:0.8em; margin-left:0;

Des raccourcis peuvent être utilisés si deux valeurs sont identiques :

margin: 1em 0 0.8em;

équivaut à :

margin-top:1em;margin-right:0;margin-bottom:0.8em; margin-left:0;

margin: 1em 0.5em;

équivaut à :

margin-top:1em;margin-right:0.5em;margin-bottom:1em; margin-left:0.5em;