CSS inset-inline-start
La proprietà CSS3 inset-inline-start definisce la distanza logica dal bordo iniziale dell’asse inline
La proprietà inset-inline-start controlla la distanza tra un elemento e il bordo iniziale dell’asse orizzontale (inline), in base alla direzione del testo. In scrittura LTR equivale a left, mentre in RTL equivale a right. È una delle proprietà logiche di CSS3 progettate per layout internazionali e flessibili.
Sintassi
Significato dei valori principali:
-
lunghezza: Valore fisso di distanza (es.
20px,1.5em). -
percentuale: Percentuale rispetto alla larghezza del contenitore padre (es.
15%). -
auto: Valore predefinito che consente al browser di calcolare automaticamente la posizione.
Esempio proprietà: inset-inline-start
Codice Esempio: inset-inline-start
.inset-inline-start-container {
position: relative;
height: 250px;
background-color: #f0f0ff;
border: 2px dashed #5c5cff;
}.inset-inline-start-example {
position: absolute;
inset-block-start: 30px;
inset-inline-start: 25px;
width: 220px;
height: 60px;
background-color: #5c5cff;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
border-radius: 8px;
}
Contenuto Esempio: inset-inline-start
Esempio di utilizzo di inset-inline-start
In questo esempio, l’elemento è posizionato rispetto al bordo logico iniziale dell’asse inline (corrisponde a left in LTR).
inset-inline-start
CSS e HTML per inset-inline-start:
<style>
.inset-inline-start-container {
position: relative;
height: 250px;
background-color: #f0f0ff;
border: 2px dashed #5c5cff;
}
.inset-inline-start-example {
position: absolute;
inset-block-start: 30px;
inset-inline-start: 25px;
width: 220px;
height: 60px;
background-color: #5c5cff;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
border-radius: 8px;
}
</style>
<div class="inset-inline-start-container">
<div class="inset-inline-start-example">
Posizionato con inset-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
