CSS inset-block
La proprietà CSS4 inset-block imposta il posizionamento verticale logico
La proprietà inset-block consente di definire simultaneamente la distanza tra un elemento e i bordi superiore e inferiore (logici) del suo contenitore. È parte delle proprietà logiche introdotte in CSS4 e favorisce la scrittura di layout adattivi a diverse direzioni di scrittura (es. top-to-bottom, right-to-left).
Sintassi
Significato dei valori principali:
-
start: Spazio dalla direzione logica iniziale del blocco (di solito
topnei layout LTR orizzontali). -
end: Spazio dalla direzione logica finale del blocco (di solito
bottomnei layout LTR orizzontali). -
Unità: Può essere espresso in
px,%,em, oppureauto. -
Valore singolo: Se viene specificato un solo valore, questo viene applicato sia a
startche aend.
Esempio proprietà: inset-block
Codice Esempio: inset-block
.inset-block-container {
position: relative;
width: 300px;
height: 250px;
background-color: #f0f0f0;
border: 2px dashed #555;
}.inset-block-box {
position: absolute;
inset-block: 30px 40px; /* start (top), end (bottom) */
inset-inline: 20px; /* sinistra e destra */
background-color: #e45649;
color: white;
padding: 10px;
border-radius: 6px;
text-align: center;
}
Contenuto Esempio: inset-block
Esempio di utilizzo di inset-block
In questo esempio, un elemento assoluto viene posizionato verticalmente usando inset-block all'interno di un contenitore:
inset-block: 30px 40px;
start = top, end = bottom
CSS e HTML per l'elemento con inset-block:
<style>
.inset-block-container {
position: relative;
width: 300px;
height: 250px;
background-color: #fff;
border: 2px dashed #555;
}
.inset-block-box {
position: absolute;
inset-block: 30px 40px; /* start = top, end = bottom */
inset-inline: 20px; /* per centrarlo orizzontalmente */
background-color: #e45649;
color: white;
padding: 10px;
border-radius: 6px;
text-align: center;
}
</style>
<div class="inset-block-container">
<div class="inset-block-box">
Posizionato con inset-block
</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
