CSS inset-inline-end
La proprietà CSS3 inset-inline-end definisce la distanza logica dal bordo finale dell’asse inline
La proprietà inset-inline-end imposta la distanza tra un elemento posizionato in modo assoluto e il bordo logico finale dell’asse orizzontale (inline). Si adatta alla direzione di scrittura, risultando estremamente utile per layout multilingua o bidirezionali. In LTR equivale a right, in RTL equivale a left.
Sintassi
Significato dei valori principali:
-
lunghezza: Una distanza fissa dal bordo logico finale dell’asse inline (es.
20px,2em). -
percentuale: Percentuale rispetto alla larghezza del contenitore padre (es.
10%). -
auto: Valore predefinito; il browser calcola automaticamente la posizione in base al layout.
Esempio proprietà: inset-inline-end
Codice Esempio: inset-inline-end
.inset-inline-end-container {
position: relative;
height: 250px;
background-color: #fdf6e3;
border: 2px dashed #b58900;
}.inset-inline-end-example {
position: absolute;
inset-block-start: 40px;
inset-inline-end: 30px;
width: 220px;
height: 60px;
background-color: #b58900;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
border-radius: 8px;
}
Contenuto Esempio: inset-inline-end
Esempio di utilizzo di inset-inline-end
In questo esempio, l’elemento è posizionato rispetto al bordo logico finale (che corrisponde a right in scrittura LTR).
inset-inline-end
CSS e HTML per inset-inline-end:
<style>
.inset-inline-end-container {
position: relative;
height: 250px;
background-color: #fdf6e3;
border: 2px dashed #b58900;
}
.inset-inline-end-example {
position: absolute;
inset-block-start: 40px;
inset-inline-end: 30px;
width: 220px;
height: 60px;
background-color: #b58900;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
border-radius: 8px;
}
</style>
<div class="inset-inline-end-container">
<div class="inset-inline-end-example">
Posizionato con inset-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.108
