Margini esterni

La proprietà margin di CSS permette di specificare lo spazio vuoto da lasciare attorno a un elemento, all'esterno di un eventuale bordo. La dimensione dei margini può essere espressa come valore assoluto, ad esempio in pixel, oppure in percentuale rispetto alla dimensione dell'elemento a cui è applicata.

• margin: 10px imposta i margini esterni a 10 pixel
• margin: 10% imposta i margini esterni al 10% della dimensione dell'elemento
• margin: auto imposta automaticamente i margini esterni in modo che l'elemento venga centrato
• margin: inherit eredita i margini esterni dall'elemento genitore

margin: 10px

margin: 15%

margin: auto

Prova a ridimensionare la finestra del browser per vedere come i margini si adattano.

Margini esterni individuali

Possono essere definiti i margin esterni individualmente su ciascun lato:

• margin-top definisce il margine esterno superiore
• margin-bottom definisce il margine esterno inferiore
• margin-left definisce il margine esterno sinistro
• margin-right definisce il margine esterno destro

Margini esterni raggruppati

La proprietà margin può anche essere utilizzata per definire i margini esterni in modo raggruppato:

• margin: 10px 20px 15px 5px imposta i margini esterni in senso orario a partire dall'alto (superiore, destro, inferiore, sinistro)
• margin: 10px 20px 15px imposta i margini esterni superiore e inferiore a 10px e 15px, e i margini sinistro e destro a 20px
• margin: 10px 20px imposta i margini esterni superiore e inferiore a 10px, e i margini sinistro e destro a 20px
• margin: 10px imposta tutti i margini esterni a 10px

Margini interni

In modo analogo, la proprietà padding di CSS permette di specificare lo spazio vuoto da lasciare attorno a un elemento, all'interno di un eventuale bordo.

padding: 10px

padding: 15px

padding: 20px

Margini interni individuali

Possono essere definiti i margin interni individualmente su ciascun lato:

• padding-top definisce il margine interno superiore
• padding-bottom definisce il margine interno inferiore
• padding-left definisce il margine interno sinistro
• padding-right definisce il margine interno destro

Margini interni raggruppati

La proprietà margin può anche essere utilizzata per definire i margini interni in modo raggruppato:

• padding: 10px 20px 15px 5px imposta i margini interni in senso orario a partire dall'alto (superiore, destro, inferiore, sinistro)
• padding: 10px 20px 15px imposta i margini interni superiore e inferiore a 10px e 15px, e i margini sinistro e destro a 20px
• padding: 10px 20px imposta i margini interni superiore e inferiore a 10px, e i margini sinistro e destro a 20px
• padding: 10px imposta tutti i margini interni a 10px

In conclusione, le proprietà margin e padding sono fondamentali per controllare lo spazio esterno e interno degli elementi in CSS.