Proprietà CSS inset-inline-end

Pagina precedente inset-inline
Pagina successiva inset-inline-start

Definizione e uso

inset-inline-end L'attributo imposta la distanza tra l'estremità finale dell'elemento e l'elemento padre nella direzione della riga.

Attenzione:Per rendere questo attributo efficace, è necessario specificare position attributi CSS.

CSS inset-inline e inset-block L'attributo è correlato ai top,bottom,left e right L'attributo è molto simile, ma inset-block e inset-inline L'attributo dipende dalla direzione del blocco e della riga.

Attenzione:proprietà CSS correlate writing-mode e direction Definisce la direzione della riga. Questo influisce sulla posizione dell'estremità dell'elemento nella direzione della riga e inset-inline-end Il risultato dell'attributo. Per le pagine in inglese, la direzione della riga è da sinistra a destra, e la direzione del blocco è verso il basso.

Esempio

Esempio 1

Impostare la distanza tra l'estremità finale dell'elemento <div> orientato in direzione della riga e l'elemento padre:

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

Prova tu stesso

Esempio 2

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

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

Prova tu stesso

Esempio 3

Quando l'elemento <div> ha direction Quando il valore dell'attributo è impostato su rtl, la direzione della riga è da destra a sinistra. Di conseguenza, l'estremità dell'elemento si sposta da destra a sinistra:

div {
  inset-inline-end: 50px;
  direction: rtl;
}

Prova tu stesso

Sintassi CSS

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

Valore dell'attributo

Valore	Descrizione
auto	Valore predefinito. Distanza interna predefinita dell'elemento.
length	Specificare la distanza con unità come px, pt, cm, ecc. Valori negativi ammessi. Vedi:Unità CSS.
%	Specificare la distanza percentuale rispetto alla dimensione dell'elemento padre sull'asse corrispondente.
initial	Imposta questa proprietà al suo valore predefinito. Vedi initial.
inherit	Inherita questa proprietà dal suo elemento padre. Vedi inherit.

Dettagli tecnici

Valore predefinito:	auto
Ereditarietà:	No
Creazione dell'animazione:	Supporto. Vedi:Proprietà correlate agli animazioni.
Versione:	CSS3
Sintassi JavaScript:	object.style.insetInlineEnd="30%"