CSS margin-block-start
La proprietà CSS3 margin-block-start definisce il margine logico superiore
La proprietà margin-block-start consente di impostare il margine all’inizio dell’asse del blocco, che corrisponde al margine superiore in scritture top-to-bottom. È una proprietà logica introdotta in CSS3 Logical Properties, utile per supportare layout con direzioni di testo diverse.
Sintassi
Significato dei valori principali:
-
lunghezza: Valore fisso, ad esempio
25px,1em. -
percentuale: Percentuale relativa all’altezza del contenitore padre, come
10%. -
auto: Valore predefinito che lascia al browser la gestione del margine.
Esempio proprietà: margin-block-start
Codice Esempio: margin-block-start
.margin-block-start-example {
background-color: #c9184a;
color: white;
padding: 20px;
font-size: 20px;
text-align: center;
margin-block-start: 40px;
border-radius: 8px;
}.elemento-successivo {
background-color: #ffe3e6;
padding: 15px;
border: 1px solid #c9184a;
}
Contenuto Esempio: margin-block-start
Esempio di utilizzo di margin-block-start
In questo esempio, l’elemento ha un margine superiore logico definito con margin-block-start.
CSS e HTML per margin-block-start:
<style>
.margin-block-start-example {
background-color: #c9184a;
color: white;
padding: 20px;
font-size: 20px;
text-align: center;
margin-block-start: 40px;
border-radius: 8px;
}
.elemento-successivo {
background-color: #ffe3e6;
padding: 15px;
border: 1px solid #c9184a;
}
</style>
<div class="margin-block-start-container">
<div class="margin-block-start-example">
Margine logico superiore
</div>
<div class="elemento-successivo">
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
