CSS margin-block-end
La proprietà CSS3 margin-block-end definisce il margine logico inferiore
La proprietà margin-block-end permette di specificare il margine alla fine dell’asse del blocco, cioè in basso in scrittura top-to-bottom. In contesti di scrittura verticali o bidirezionali, si adatta automaticamente. È parte delle proprietà logiche introdotte in CSS3 Logical Properties.
Sintassi
Significato dei valori principali:
-
lunghezza: Valore fisso, ad esempio
30px,1em,2rem. -
percentuale: Margine calcolato in base all’altezza del contenitore padre, es.
10%. -
auto: Lascia che il browser calcoli automaticamente il margine.
Esempio proprietà: margin-block-end
Codice Esempio: margin-block-end
.margin-block-end-example {
background-color: #859900;
color: white;
padding: 20px;
font-size: 20px;
text-align: center;
margin-block-end: 50px;
border-radius: 6px;
}.altro-elemento {
background-color: #eee8d5;
padding: 20px;
border: 1px solid #93a1a1;
}
Contenuto Esempio: margin-block-end
Esempio di utilizzo di margin-block-end
In questo esempio, il margine inferiore viene applicato all’elemento tramite margin-block-end.
CSS e HTML per margin-block-end:
<style>
.margin-block-end-example {
background-color: #859900;
color: white;
padding: 20px;
font-size: 20px;
text-align: center;
margin-block-end: 50px;
border-radius: 6px;
}
.altro-elemento {
background-color: #eee8d5;
padding: 20px;
border: 1px solid #93a1a1;
}
</style>
<div class="margin-block-end-container">
<div class="margin-block-end-example">
Margine logico inferiore
</div>
<div class="altro-elemento">
Elemento successivo
</div>
</div>
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
