Boliboop

CSS Tips: alto, basso, destra o sinistra?

2 agosto 2007 , di Boliboop

Forse non tutti sanno che quando una proprietà in una regola CSS ammette da uno a quattro valori (come la proprietà margin) il comportamento di tali valori è completamente diverso a seconda del numero di valori inseriti. Vediamo il questo comportamento passo passo.

Per andare sul sicuro si può sempre ricorrere a dichiarazioni per esteso ad esempio come le seguenti:

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

ovviamente si tratta di dichiarazioni molto prolisse e, oltre ad essere noioso doverle scrivere, possono influire sui tempi di caricamento e di rendering di una pagina web. Questa regola corrisponde a quest’altra molto più stringata:

div {
     margin: 10px 20px 30px 40px;
}

Come regola mnemonica basta ricordare che, nel caso che la dichiarazione generica contenga quattro valori, questi seguono un ordine in senso orario a partire dall’alto.

Se però volessimo assegnare, nell’esempio, lo stesso valore a tutti e 4 i margini del div non dovremmo usare una regola come questa:

div {
     margin-top: 10px;
     margin-right: 10 px;
     margin-bottom: 10px;
     margin-left: 10px;
}

ma usare questa:

div {
     margin: 10px;
}

In questo caso, se la dichiarazione generica contiene solo un valore, questo viene automaticamente assegnato a tutti e 4 i margini.

Se invece i margini alto e basso hanno lo stesso valore e i margini destro e sinistro ne hanno un altro, cioè prolissamente possiamo scrivere come segue:

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

allora la regola stringata, con due valori, è la seguente:

div {
     margin: 10px 20px;
}

dove il primo valore è automaticamente assegnato alle due basi (inferiore e superiore) e il secondo valore ai due laterali (destro e sinistro).

L’ultimo caso è quando volessimo assegnare uno stesso valore per i margini destro e sinistro e due valori diversi (fra di loro e dal primo) ai margini superiore e inferiore, ovvero quando, senza paura di sprecare byte, possiamo scrivere:

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

regola che può essere felicemente riassunta con tre valori come segue:

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

automaticamente il primo valore è assegnato al margine superiore, il secondo valore al margine destro e a quello sinistro, il terzo a quello inferiore.

Condividi

Articoli correlati:

1. Mac Tips: spostare le icone nella barra dei menu
2. Dock: ridimensionarlo velocemente
3. Apollo e Apollo Book 3D