Proprietà CSS inset-block-end

Recomandazione del corso:

inset-block-end Definizione e uso

Attenzione:Proprietà che imposta la distanza tra l'estremità finale dell'elemento e l'elemento padre nella direzione del blocco. Per far funzionare questa proprietà, è necessario specificare position

Proprietà di CSS inset-inline e inset-block Proprietà sono simili a CSS top,bottom,left e right Proprietà sono molto simili, ma inset-block e inset-inline L'attributo dipende dalla direzione del blocco e della direzione della riga.

Attenzione:Proprietà CSS correlate writing-mode Definisce la direzione del blocco. Questo influisce sulla posizione di inizio e fine del blocco, nonché inset-block-end Il risultato dell'attributo. Per le pagine in inglese, la direzione del blocco è verso il basso, e la direzione della riga è da sinistra a destra.

Esempio

Esempio 1

Impostare la distanza tra l'estremità finale dell'elemento <div> posizionato e l'elemento padre nella direzione del blocco:

div {
  inset-block-end: 50px;
}

Prova personalmente

Esempio 2

Quando l'elemento <div> ha writing-mode Quando il valore dell'attributo è impostato su vertical-rl, la direzione del blocco è da destra a sinistra. Di conseguenza, l'estremità dell'elemento si sposta da basso a sinistra:

div {
  inset-block-end: 50px;
  writing-mode: vertical-rl;
}

Prova personalmente

Sintassi CSS

inset-block-end: auto|length|initial|inherit;

Valore dell'attributo

Dettagli tecnici

Supporto del browser

Tabella delle numeri rappresenta la versione del browser che supporta completamente l'attributo.

Pagine correlate

Tutorial:Posizionamento CSS

Riferimento:Proprietà CSS position

Riferimento:Proprietà CSS writing-mode