Margini CSS
I margini vengono utilizzati per creare spazio attorno agli elementi, al di fuori di qualsiasi confine definito.
Margini CSS
Le proprietà CSS marginvengono utilizzate per creare spazio attorno agli elementi, al di fuori di qualsiasi confine definito.
Con CSS, hai il pieno controllo sui margini. Esistono proprietà per impostare il margine per ciascun lato di un elemento (in alto, a destra, in basso e a sinistra).
Margine - Singoli lati
CSS ha proprietà per specificare il margine per ciascun lato di un elemento:
margin-topmargin-rightmargin-bottommargin-left
Tutte le proprietà del margine possono avere i seguenti valori:
- auto - il browser calcola il margine
- lunghezza - specifica un margine in px, pt, cm, ecc.
- % - specifica un margine in % della larghezza dell'elemento contenitore
- eredita - specifica che il margine deve essere ereditato dall'elemento padre
Suggerimento: sono consentiti valori negativi.
Esempio
Imposta margini diversi per tutti e quattro i lati di un elemento <p>:
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Margine - Proprietà abbreviata
Per abbreviare il codice, è possibile specificare tutte le proprietà del margine in un'unica proprietà.
La marginproprietà è una proprietà abbreviata per le seguenti proprietà a margine individuali:
margin-topmargin-rightmargin-bottommargin-left
Quindi, ecco come funziona:
Se la marginproprietà ha quattro valori:
- margine: 25px 50px 75px 100px;
- il margine superiore è 25px
- il margine destro è 50px
- il margine inferiore è 75px
- il margine sinistro è 100px
Esempio
Utilizzare la proprietà abbreviazione del margine con quattro valori:
p {
margin: 25px 50px 75px 100px;
}
Se la marginproprietà ha tre valori:
- margine: 25px 50px 75px;
- il margine superiore è 25px
- i margini destro e sinistro sono 50px
- il margine inferiore è 75px
Esempio
Utilizzare la proprietà abbreviazione del margine con tre valori:
p {
margin: 25px 50px 75px;
}
Se la marginproprietà ha due valori:
- margine: 25px 50px;
- i margini superiore e inferiore sono 25px
- i margini destro e sinistro sono 50px
Esempio
Utilizzare la proprietà abbreviazione del margine con due valori:
p {
margin: 25px 50px;
}
Se la marginproprietà ha un valore:
- margine: 25px;
- tutti e quattro i margini sono 25px
Esempio
Usa la proprietà abbreviazione del margine con un valore:
p {
margin: 25px;
}
Il valore automatico
È possibile impostare la proprietà margin su autoper centrare orizzontalmente l'elemento all'interno del relativo contenitore.
L'elemento occuperà quindi la larghezza specificata e lo spazio rimanente verrà diviso equamente tra i margini sinistro e destro.
Esempio
Usa margine: automatico:
div {
width: 300px;
margin:
auto;
border: 1px solid red;
}
Il valore ereditario
Questo esempio consente di ereditare il margine sinistro dell'elemento <p class="ex1"> dall'elemento padre (<div>):
Esempio
Uso del valore ereditario:
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left:
inherit;
}