Il Clockwise nel css viene usato come comando rapido della proprietà “padding” e della proprietà “margin”.
Mentre la proprietà del padding permette di stabilire la distanza fra l’elemento e il bordo del contenitore dell’elemento, la proprietà del “margin”, ovvero del “margine”, consente di stabilire la distanza fra i bordi di un dato elemento e tutti gli altri elementi che lo circondano.
Nello specifico, il clockwise consente di impostare la proprietà del padding o del margin in un dato elemento, all’interno di una classe o di un id, in maniera più rapida rispetto ai comandi classici, che prevedono la scrittura della singola proprietà per tutti i “lati” dell’elemento, ovvero il top (la parte superiore), la parte “right” (ovvero la parte a destra), la parte “left” (ovvero la parte a sinistra) e la parte “bottom” (ovvero la parte in basso dell’elemento).
Riassumendo, quindi, usando il clockwise andremo a scrivere direttamente un unico comando per impostare tutti e 4 questi lati e specificando i singoli valori, anziché scriverne uno solo senza poter però specificare valori differenti eventualmente da assegnare a ciascun “lato”, oppure 4 comandi, ciascuno per ogni lato.
Per scrivere il clockwise nel css basta inserire all’interno della zona di “<style>”, nella parte relativa alla classe o all’id scelto, la riga “margin: 10px 10px 10px 10px;” per il margine, mentre “padding: 10px 10px 10px 10px;” per impostare la proprietà del padding.
Nell’esempio riportato nella riga di sopra, i lati del CLOCKWISE sono rispettivamente, in ordine da sinistra a destra, il top, il lato destro, il bottom, il lato sinistro: si parte dal top per proseguire in senso orario.