CSS margin-bottom
La proprietà CSS margin-bottom imposta il margine inferiore di un elemento (CSS3)
La proprietà margin-bottom in CSS3 serve a definire la distanza tra la parte inferiore di un elemento e gli elementi che lo seguono. È molto utile per creare spaziature verticali regolari nei layout delle pagine web.
Sintassi
Significato dei valori principali:
lunghezza: Un valore fisso come
10px,1em,2remecc. Specifica esattamente quanto margine inferiore applicare.percentuale: Percentuale relativa alla larghezza del contenitore padre (
margin-bottom: 10%;).auto: Lascia che il browser calcoli automaticamente il margine. Poco usato con
margin-bottom.inherit: Eredita il valore dal suo elemento genitore.
initial / unset: Ripristina il valore predefinito o annulla tutte le dichiarazioni.
Esempio proprietà: margin-bottom
Codice Esempio: margin-bottom
.margin-example {
background-color: #e06c75;
color: white;
padding: 15px;
margin-bottom: 25px;
font-size: 18px;
border-radius: 5px;
}.second-box {
background-color: #4078f2;
color: white;
padding: 15px;
font-size: 18px;
border-radius: 5px;
}
Contenuto Esempio: margin-bottom
Esempio di utilizzo della proprietà margin-bottom
In questo esempio, due elementi vengono separati usando margin-bottom:
margin-bottom: 25px;CSS e HTML per l'esempio con margin-bottom:
<style>
.container {
background-color: #fdf6e3;
border: 2px dashed #50a14f;
}
.margin-example {
background-color: #e06c75;
color: white;
padding: 15px;
margin-bottom: 25px; /* Margine inferiore */
font-size: 18px;
border-radius: 5px;
}
.second-box {
background-color: #4078f2;
color: white;
padding: 15px;
font-size: 18px;
border-radius: 5px;
}
</style>
<div class="container">
<div class="margin-example">
Elemento con margin-bottom: 25px;
</div>
<div class="second-box">
Elemento successivo
</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.118
