CSS margin
La proprietà CSS margin imposta lo spazio esterno di un elemento (CSS3)
La proprietà margin di CSS3 regola lo spazio esterno attorno a un elemento HTML. Si tratta di una proprietà shorthand che consente di impostare contemporaneamente i margini superiore, destro, inferiore e sinistro. Può essere utilizzata anche con il valore auto per centrare gli elementi orizzontalmente.
Sintassi
Significato dei valori principali:
-
lunghezza: Valore fisso (es.
10px,2em,5rem) che specifica l'ampiezza del margine. -
percentuale: Percentuale relativa alla larghezza del contenitore (es.
10%). -
auto: Il browser calcola automaticamente il margine. Utile per centrare orizzontalmente un elemento.
-
valori multipli: È possibile specificare fino a quattro valori in ordine:
top right bottom left. -
inherit / initial / unset: Valori globali per ereditare, inizializzare o annullare il valore.
Esempio proprietà: margin
Codice Esempio: margin
.container {
background-color: #f0f0f0;
padding: 30px;
}.box {
background-color: #4078f2;
color: white;
padding: 20px;
margin: 20px;
border-radius: 8px;
font-size: 18px;
text-align: center;
}.box-auto {
margin: auto;
width: 200px;
background-color: #50a14f;
}
Contenuto Esempio: margin
Esempio di utilizzo della proprietà margin
In questo esempio si vede come la proprietà margin gestisce lo spazio esterno di un elemento rispetto agli altri:
margin: 20px;margin: auto;CSS e HTML per l'esempio con margin:
<style>
.container {
background-color: #fdf6e3;
border: 2px dashed #50a14f;
}
.box-20 {
margin: 20px;
background-color: #4078f2;
color: white;
padding: 20px;
border-radius: 8px;
font-size: 18px;
text-align: center;
}
.box-auto {
margin: auto;
width: 200px;
background-color: #50a14f;
color: white;
padding: 20px;
border-radius: 8px;
font-size: 18px;
text-align: center;
}
</style>
<div class="container">
<div class="box-20">Elemento con margin: 20px;</div>
<div class="box-auto">Elemento centrato</div>
</div>
Leggenda Proprietà:
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.108
