Guida base al CSS

Con il CSS possiamo impostare dei margini per creare spazio attorno agli elementi. E' molto importante sapere usare i margini per posizionare un elemento, un box o un div per esempio, esattamente nel punto della pagina dove vogliamo. Possiamo impostare il margine per ogni lato dell'elemento a cui facciamo riferimento.

margin-top
margin-right
margin-bottom
margin-left

Ai margini possiamo impostare questi valori:

auto - il browser calcola il margine automaticamente
length - specifica un margine in px
% - specifica un margine in percentuale basandosi sulla grandezza dell'elemento che lo contiene
inherit - specifica che il margine deve essere ereditato dall'elemento genitore.

p.s. Anche i valori negativi sono consentiti.

Facciamo un esempio: settiamo margini differenti per ognuno dei quattro lati, ad un elemento <div> che abbia anche un bordo di 1 pixel, e uno sfondo lightblue.

div {
    border: 1px solid black;
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
    background-color: lightblue;
}

Quello che otteniamo è questo:

Il valore auto

Puoi impostare la proprietà margin con il valore "auto" per allineare centralmente l'elemento dentro il suo contenitore. L'elemento prenderà la grandezza specificata e il resto dello spazio si dividerà equamente tra i margini destro e sinistro, esempio:

div {
    width: 300px;
    margin: auto;
    border: 1px solid red;
}

Otteniamo: