CSS inset
La proprietà CSS4 inset imposta contemporaneamente top, right, bottom e left
La proprietà inset è una scorciatoia introdotta in CSS4 che consente di specificare il posizionamento di un elemento rispetto ai suoi bordi logici. È utile per elementi posizionati con position: absolute o fixed, permettendo di definire in un'unica riga tutte le direzioni anziché usare singolarmente top, right, bottom e left.
Sintassi
Significato dei valori principali:
-
lunghezza / percentuale / auto: Valori accettati da ciascuna delle 4 direzioni (
top,right,bottom,left). Può essere espresso inpx,%,em, oppureauto. -
valori singoli o multipli: Come per il padding o margin, si possono indicare da 1 a 4 valori. Ad esempio:
inset: 10px 20px;equivale atop:10px; right:20px; bottom:10px; left:20px;.
Esempio proprietà: inset
Codice Esempio: inset
.inset-container {
position: relative;
width: 300px;
height: 200px;
background-color: #f5f5f5;
border: 2px dashed #333;
}.inset-box {
position: absolute;
inset: 20px 30px 40px 50px; /* top right bottom left */
background-color: #50a14f;
color: white;
padding: 10px;
border-radius: 6px;
text-align: center;
}
Contenuto Esempio: inset
Esempio di utilizzo di inset
In questo esempio, la proprietà inset viene usata per posizionare un elemento assoluto all'interno di un contenitore:
inset: 20px 30px 40px 50px;
top right bottom left
CSS e HTML per l'elemento posizionato con inset:
<style>
.inset-container {
position: relative;
width: 300px;
height: 200px;
background-color: #fff;
border: 2px dashed #333;
}
.inset-box {
position: absolute;
inset: 20px 30px 40px 50px; /* top right bottom left */
background-color: #50a14f;
color: white;
padding: 10px;
border-radius: 6px;
}
</style>
<div class="inset-container">
<div class="inset-box">
Posizionato con inset
</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
