CSS inset-inline
La proprietà CSS3 inset-inline controlla il posizionamento orizzontale logico
La proprietà inset-inline consente di impostare la distanza logica sia dal lato iniziale che da quello finale dell’asse inline. In scritture LTR (da sinistra a destra), corrisponde a left e right. È particolarmente utile per la compatibilità con lingue RTL o layout verticali, ed è stata introdotta con CSS3 Logical Properties.
Sintassi
Significato dei valori principali:
-
lunghezza / percentuale: Valori come
20pxo10%specificano la distanza logica dall'inizio e dalla fine dell'asse inline. -
un singolo valore: Viene applicato sia al lato iniziale che a quello finale.
-
due valori: Il primo è per il lato iniziale (es: sinistra in LTR), il secondo per quello finale (es: destra in LTR).
-
auto: Lascia il posizionamento calcolato automaticamente dal browser.
Esempio proprietà: inset-inline
Codice Esempio: inset-inline
.inset-inline-container {
position: relative;
height: 250px;
background-color: #fafafa;
border: 2px dashed #ccc;
}.inset-inline-example {
position: absolute;
inset-block-start: 30px;
inset-inline: 40px 80px;
height: 60px;
background-color: #e45649;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
border-radius: 8px;
}
Contenuto Esempio: inset-inline
Esempio di utilizzo di inset-inline
Questo esempio mostra come un elemento possa essere posizionato lungo l’asse orizzontale usando inset-inline.
inset-inline
CSS e HTML per l’elemento con inset-inline:
<style>
.inset-inline-container {
position: relative;
height: 250px;
background-color: #fafafa;
border: 2px dashed #ccc;
}
.inset-inline-example {
position: absolute;
inset-block-start: 30px;
inset-inline: 40px 80px; /* distanza dai bordi inline-logici */
height: 60px;
background-color: #e45649;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
border-radius: 8px;
}
</style>
<div class="inset-inline-container">
<div class="inset-inline-example">
Posizionato con inset-inline
</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
