CSS inset-block-end
La proprietà CSS3 inset-block-end definisce la distanza dal bordo inferiore logico
La proprietà inset-block-end fa parte del modello di posizionamento logico introdotto in CSS3. Essa determina la distanza tra il margine inferiore logico dell’elemento e il contenitore padre. A differenza di bottom, inset-block-end si adatta automaticamente al flusso di scrittura (come verticale o da destra a sinistra).
Sintassi
Significato dei valori principali:
-
lunghezza: Imposta la distanza dal lato blocco-fine con un'unità fissa, come
px,em,rem, ecc. (es:20px). -
percentuale: Imposta la distanza in percentuale rispetto all’altezza del contenitore padre (es:
10%). -
auto: Valore predefinito; lascia che il browser calcoli automaticamente la posizione.
Esempio proprietà: inset-block-end
Codice Esempio: inset-block-end
.inset-block-end-container {
position: relative;
height: 250px;
background-color: #e0e0e0;
border: 2px dashed #999;
}.inset-block-end-example {
position: absolute;
inset-block-end: 20px;
inset-inline-start: 30px;
width: 200px;
height: 60px;
background-color: #50a14f;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
border-radius: 8px;
}
Contenuto Esempio: inset-block-end
Esempio di utilizzo di inset-block-end
Questo esempio mostra come posizionare un elemento verso il lato "fine" dell’asse del blocco usando inset-block-end in un contesto position: absolute.
inset-block-end
CSS e HTML per il posizionamento logico con inset-block-end:
<style>
.inset-block-end-container {
position: relative;
height: 250px;
background-color: #e0e0e0;
border: 2px dashed #999;
}
.inset-block-end-example {
position: absolute;
inset-block-end: 20px; /* distanza dal fondo logico */
inset-inline-start: 30px;
width: 200px;
height: 60px;
background-color: #50a14f;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
border-radius: 8px;
}
</style>
<div class="inset-block-end-container">
<div class="inset-block-end-example">
Posizionato con inset-block-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
