CSS margin-inline-end
La proprietà CSS3 margin-inline-end definisce il margine logico alla fine dell’asse orizzontale
La proprietà margin-inline-end consente di impostare un margine alla fine dell’asse orizzontale in base alla direzione del testo. In scritture LTR corrisponde a margin-right, mentre in RTL corrisponde a margin-left. È una proprietà logica introdotta in CSS3 Logical Properties per una maggiore adattabilità nei layout multilingua.
Sintassi
Significato dei valori principali:
-
lunghezza: Un valore fisso come
15px,2em, ecc. -
percentuale: Calcolata rispetto alla larghezza del contenitore padre (es.
10%). -
auto: Lascia che il browser calcoli lo spazio automaticamente.
Esempio proprietà: margin-inline-end
Codice Esempio: margin-inline-end
.margin-inline-end-example {
background-color: #0a9396;
color: white;
padding: 20px;
font-size: 18px;
text-align: center;
border-radius: 6px;
margin-inline-end: 50px;
}
Contenuto Esempio: margin-inline-end
Esempio di utilizzo di margin-inline-end
In questo esempio, viene applicato un margine logico alla fine dell’asse orizzontale tramite margin-inline-end.
CSS e HTML per margin-inline-end:
<style>
.margin-inline-end-example {
background-color: #0a9396;
color: white;
padding: 20px;
font-size: 18px;
text-align: center;
border-radius: 6px;
margin-inline-end: 50px;
}
</style>
<div class="margin-inline-end-container">
<div class="margin-inline-end-example">
Margine logico finale (inline-end)
</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.214
