CSS inset-block-start
La proprietà CSS3 inset-block-start definisce la distanza dal bordo superiore logico
La proprietà inset-block-start consente di posizionare un elemento rispetto al bordo iniziale dell’asse del blocco. In contesti left-to-right e top-to-bottom, equivale a top. Fa parte delle proprietà logiche di CSS3, che garantiscono maggiore flessibilità nei layout multilingua e adattivi.
Sintassi
Significato dei valori principali:
-
lunghezza: Una distanza fissa dal bordo logico di inizio del blocco, ad esempio
20px,2em. -
percentuale: Percentuale relativa all’altezza del contenitore padre, es.
10%. -
auto: Valore predefinito che lascia calcolare al browser la posizione dell’elemento.
Esempio proprietà: inset-block-start
Codice Esempio: inset-block-start
.inset-block-start-container {
position: relative;
height: 250px;
background-color: #f5f5f5;
border: 2px dashed #aaa;
}.inset-block-start-example {
position: absolute;
inset-block-start: 15px;
inset-inline-start: 30px;
width: 220px;
height: 60px;
background-color: #4078f2;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
border-radius: 8px;
}
Contenuto Esempio: inset-block-start
Esempio di utilizzo di inset-block-start
Questo esempio mostra come un elemento possa essere posizionato rispetto al bordo superiore logico del contenitore usando inset-block-start.
inset-block-start
CSS e HTML per il posizionamento con inset-block-start:
<style>
.inset-block-start-container {
position: relative;
height: 250px;
background-color: #f5f5f5;
border: 2px dashed #aaa;
}
.inset-block-start-example {
position: absolute;
inset-block-start: 15px;
inset-inline-start: 30px;
width: 220px;
height: 60px;
background-color: #4078f2;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
border-radius: 8px;
}
</style>
<div class="inset-block-start-container">
<div class="inset-block-start-example">
Posizionato con inset-block-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
