margin
Il margin rappresenta la distanza che intercorre tra due elementi adiacenti. Anzitutto, va specificato che margin è la short definition: per motivi pratici, preferisco spiegarti questa proprietà partendo da quella generale, in quanto è più semplice e immediata da capire.
I margini utilizzabili sono: sopra (top), destra (right), basso (bottom), sinistra (left). La quantità di valori che puoi attribuire a margin varia da 1 a 4, pensati sempre in senso orario; nello specifico, le quattro possibilità.
Se è definito un solo valore, esso viene applicato per tutti e 4 i margini
header{
margin: 10px;
}
Se sono definiti 2 valori, vengono prese le coppie di margini opposti
header{
margin:5px 10px;
}
Se sono definiti 3 valori, il secondo ed il quarto valore sono uguali
header{
margin:2px 4px 8px;
}
Se sono definiti 4 valori, ogni margine viene rappresentato e letto in senso orario, partendo da quello sopra
header{
margin:2px 4px 8px 10px;
}
Da queste definizioni puoi ricavare che esistono anche le singole proprietà: margin-top, margin-right, margin-bottom, margin-left.
Ricordati che non sempre è utile definire tutti i valori con la short definition: in molti casi, se devi agire unicamente su un unico margine, puoi utilizzare la singola proprietà.
Le unità di misura che puoi usare per i margini sono sempre le solite, e cioè: px, % e em. Inoltre, ricorda che per i margini puoi impostare anche valori negativi: questo significa che un margine negativo a sinistra, ad esempio, non sposterà l’elemento non verso destra, ma verso sinistra.
.negative{
margin-left: -10px;
}