CSS margin-inline-start
La proprietà CSS3 margin-inline-start definisce il margine logico iniziale sull’asse orizzontale
La proprietà margin-inline-start imposta un margine logico all’inizio dell’asse orizzontale, seguendo la direzione del testo. In scrittura LTR corrisponde a margin-left, mentre in RTL a margin-right. Questa proprietà fa parte del gruppo CSS3 Logical Properties, utile per costruire layout multilingua flessibili e adattivi.
Sintassi
Significato dei valori principali:
-
lunghezza: Imposta un margine fisso, ad esempio
20px,1rem. -
percentuale: Basato sulla larghezza del contenitore padre, es.
10%. -
auto: Margine calcolato automaticamente dal browser.
Esempio proprietà: margin-inline-start
Codice Esempio: margin-inline-start
.margin-inline-start-example {
background-color: #ff6d00;
color: white;
padding: 20px;
font-size: 18px;
text-align: center;
border-radius: 6px;
margin-inline-start: 60px;
}
Contenuto Esempio: margin-inline-start
Esempio di utilizzo di margin-inline-start
In questo esempio viene applicato un margine logico all’inizio dell’asse orizzontale tramite margin-inline-start.
CSS e HTML per margin-inline-start:
<style>
.margin-inline-start-example {
background-color: #ff6d00;
color: white;
padding: 20px;
font-size: 18px;
text-align: center;
border-radius: 6px;
margin-inline-start: 60px;
}
</style>
<div class="margin-inline-start-container">
<div class="margin-inline-start-example">
Margine logico iniziale (inline-start)
</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
