I margini sono una parte fondamentale del layout in CSS, in quanto controllano lo spazio esterno intorno agli elementi HTML. Capire come funzionano i margini è utile per creare layout ben strutturati e gradevoli.
In questa lezione, vediamo come funziona la proprietà margin.
Il margine è lo spazio esterno tra un elemento HTML e gli elementi circostanti. È trasparente e non ha colore, ma è utile per posizionare e separare gli elementi sulla pagina.
La proprietà base è margin, ma non esiste solo quella: con CSS puoi usare anche le proprietà per impostare margini per singolo lato. Ecco l'elenco:
margin: sintassi abbreviata per impostare i margini su tutti e quattro i lati (top, right, bottom, left) in una singola dichiarazione.margin-top: imposta il margine superiore dell'elemento.margin-right: imposta il margine destro dell'elemento.margin-bottom: imposta il margine inferiore dell'elemento.margin-left: imposta il margine sinistro dell'elemento.Tutte queste proprietà accettano valori assoluti (come px) e relativi (come %), che abbiamo visto nella lezione delle unità di misura, e il valore auto (che vedremo nel prossimo paragrafo).
p {
margin-top: 50px;
margin-bottom: 40px;
margin-right: 60px;
margin-left: 80px;
}Il valore auto permette di centrare gli elementi orizzontalmente all'interno dell'elemento che li contiene.
Ad esempio, vogliamo centrare un'immagine all'interno del <body> della pagina. Ecco come possiamo fare:
<img src="https://biadets.com/language/css/img/parrot.jpg">
<style>
img {
display: block;
margin: auto;
}
</style>Nell'esempio, uso l'attributo display:block per far diventare l'immagine di tipo block invece che inline. Abbiamo parlato della differenza tra i due nella lezione sugli elementi block e inline di HTML.
La proprietà margin in CSS è utilizzata per impostare i margini esterni di un elemento. Questa proprietà può accettare uno, due, tre o quattro valori, ognuno dei quali specifica i margini in modo diverso. Vediamo come funziona con esempi per ogni caso.
Quando si specifica un solo valore per la proprietà margin, questo valore viene applicato a tutti e quattro i lati dell'elemento: top, right, bottom e left.
/* Applica un margine di 20px su tutti i lati */
.elemento {
margin: 20px;
}Quando si specificano due valori per la proprietà margin, il primo valore viene applicato ai margini superiore e inferiore (top e bottom), mentre il secondo valore viene applicato ai margini destro e sinistro (right e left).
/* Applica un margine di 20px su top e bottom e 10px su right e left */
.elemento {
margin: 20px 10px;
}Quando si specificano tre valori per la proprietà margin, il primo valore viene applicato al margine superiore (top), il secondo valore viene applicato ai margini destro e sinistro (right e left), e il terzo valore viene applicato al margine inferiore (bottom).
/* Applica un margine di 20px su top, 10px su right e left, e 5px su bottom */
.elemento {
margin: 20px 10px 5px;
}Quando si specificano quattro valori per la proprietà margin, questi valori vengono applicati ai margini in senso orario, iniziando dal margine superiore (top).
/* Applica un margine di 20px su top, 10px su right, 5px su bottom, e 15px su left */
.elemento {
margin: 20px 10px 5px 15px;
}