Modello di scatola: Margine CSS

Lo spazio vuoto intorno al bordo dell'elemento è il margine. L'impostazione del margine crea uno spazio aggiuntivo "vuoto" intorno all'elemento.

Il modo più semplice per impostare i margini è utilizzare l'attributo margine, che accetta qualsiasi unità di lunghezza, valori percentuali e persino valori negativi.

Proprietà margin CSS

Il modo più semplice per impostare i margini è utilizzare L'attributo margine.

L'attributo margine accetta qualsiasi unità di lunghezza, può essere pixel, pollici, millimetri o em.

Il margine può essere impostato su auto. La pratica più comune è impostare valori di lunghezza per i margini. La seguente dichiarazione imposta uno spazio di 1/4 pollice su tutti i lati dell'elemento h1:

h1 {margine: 0.25in;}

Esempio seguente definisce margini diversi per i quattro lati dell'elemento h1, l'unità di lunghezza utilizzata è il pixel (px):

h1 {margine: 10px 0px 15px 5px;}

Come per la configurazione dei margini interni, l'ordine di questi valori parte dal margine superiore (alto) e ruota intorno all'elemento in senso orario:

margine: alto destra basso sinistra

Inoltre, è possibile impostare un valore percentuale per il margine:

p {margine: 10%;}

I numeri percentuali sono calcolati rispetto alla larghezza del padre dell'elemento. Nell'esempio sopra, il margine esterno impostato per l'elemento p è il 10% della larghezza del padre.

Il valore predefinito di margin è 0, quindi se non viene specificato un valore per margin, non verrà visualizzato alcun margine. Tuttavia, nella pratica, i browser forniscono già uno stile predefinito per molti elementi, inclusi i margini. Ad esempio, nei browser che supportano CSS, i margini generano un'interlinea vuota sopra e sotto ogni elemento paragrafo. Pertanto, se non viene specificato un margine per l'elemento p, il browser potrebbe applicare automaticamente un margine. Certo, puoi sovrascrivere lo stile predefinito se specifici uno stile particolare.

Copia dei valori

Ricordate? Abbiamo menzionato la copia dei valori nei primi due capitoli. Ora vi spieghiamo come utilizzare la copia dei valori.

A volte, inseriamo valori ripetuti:

p {margine: 0.5em 1em 0.5em 1em;}

Tramite la copia dei valori, non è necessario digitare nuovamente questa coppia di numeri. Le regole di sopra sono equivalenti a quelle di sotto:

p {margine: 0.5em 1em;}

Questi due valori possono sostituire i precedenti 4 valori. Come si fa? CSS definisce alcune regole che permettono di specificare meno di 4 valori per i margini. Le regole sono le seguenti:

  • Se manca il valore del margine sinistro, viene utilizzato il valore del margine destro.
  • Se manca il valore del margine inferiore, viene utilizzato il valore del margine superiore.
  • Se manca il valore del margine destro, viene utilizzato il valore del margine superiore.

La seguente figura fornisce un metodo più intuitivo per comprendere questo:

Copia dei valori CSS

In altre parole, se sono specificati 3 valori per il margine, il quarto valore (cioè il margine destro) viene copiato dal secondo valore (margine sinistro). Se vengono specificati due valori, il quarto valore viene copiato dal secondo valore, il terzo valore (margine inferiore) viene copiato dal primo valore (margine superiore). Nell'ultimo caso, se viene specificato solo un valore, gli altri 3 margini esterni vengono copiati da questo valore (margine superiore).

Utilizzando questo semplice meccanismo, è sufficiente specificare i valori necessari, senza dover applicare tutti e 4 i valori, ad esempio:

h1 {margine: 0.25em 1em 0.5em;}	/* Uguale a 0.25em 1em 0.5em 1em */
h2 {margine: 0.5em 1em;}	/* Uguale a 0.5em 1em 0.5em 1em */
p {margin: 1px;}			/* Uguale a 1px 1px 1px 1px */

Questo metodo ha un piccolo difetto, che alla fine sicuramente incontrerete. Supponiamo che si desideri impostare il margine superiore e il margine esterno sinistro dell'elemento p a 20 pixel, il margine inferiore e il margine esterno destro a 30 pixel. In questo caso, deve essere scritto:

p {margin: 20px 30px 30px 20px;}

In questo modo si ottiene il risultato desiderato. Sfortunatamente, in questo caso, il numero di valori necessari non può essere ridotto.

Vediamo un altro esempio. Se si desidera che tutti i margini tranne il margine esterno sinistro siano auto (il margine esterno sinistro è 20px):

p {margin: auto auto auto 20px;}

Lo stesso, in questo modo si ottiene l'effetto desiderato. Il problema è che digitare questi auto può essere fastidioso. Se si desidera controllare solo il margine unilaterale di un elemento, utilizzare l'attributo di margine unilaterale.

Attributi di margine unilaterale

È possibile utilizzare attributi di margine unilaterale per impostare valori di margine unilaterale su un elemento. Supponiamo che si desideri impostare il margine esterno sinistro dell'elemento p a 20px. Non è necessario utilizzare margin (bisogna digitare molto auto), ma è possibile utilizzare il seguente metodo:

p {margin-left: 20px;}

È possibile utilizzare uno qualsiasi dei seguenti attributi per impostare il margine superiore senza influenzare tutti gli altri margini:

È possibile utilizzare più di un attributo unilaterale in una regola, ad esempio:

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

Certo, in questo caso, l'uso di margin potrebbe essere più semplice:

p {margin: 20px 30px 30px 20px;}

Che sia utilizzato un attributo unilaterale o margin, il risultato è lo stesso. Di solito, se si desidera impostare il margine per più lati, l'uso di margin è più semplice. Tuttavia, dal punto di vista della visualizzazione del documento, in realtà non importa quale metodo utilizzare, quindi dovrebbe essere scelto il metodo più semplice per sé.

Suggerimenti e commenti

Suggerimento:Netscape e IE definiscono il valore predefinito di margine (margin) per il tag body come 8px. Opera non è così. Al contrario, Opera definisce il valore predefinito di padding interno come 8px, quindi se si desidera regolamentare l'intera parte marginale del sito e mostrarla correttamente in Opera, è necessario personalizzare il padding del body.

Esempio di margine esterno CSS:

Impostare il margine esterno sinistro del testo
Questo esempio dimostra come impostare la margine sinistra del testo.
Impostare la margine destra del testo
Questo esempio dimostra come impostare la margine destra del testo.
Impostare la margine superiore del testo
Questo esempio dimostra come impostare la margine superiore del testo.
Impostare la margine inferiore del testo
Questo esempio dimostra come impostare la margine inferiore del testo.
Tutte le proprietà di margine in una dichiarazione.
Questo esempio dimostra come impostare tutte le proprietà di margine in una dichiarazione.

Proprietà di margine CSS

Proprietà Descrizione
margin Proprietà abbreviate. Impostare tutte le proprietà di margine in una dichiarazione.
margin-bottom Impostare la margine esterna inferiore dell'elemento.
margin-left Impostare la margine esterna sinistra dell'elemento.
margin-right Impostare la margine esterna destra dell'elemento.
margin-top Impostare la margine superiore esterna dell'elemento.