Proprietà CSS inset-inline

Definizione e utilizzo

inset-inline impostare la distanza dell'elemento dal suo elemento genitore nella direzione di riga.

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

inset-inline L'attributo è un attributo abbreviato delle seguenti proprietà:

inset-inline Il valore dell'attributo può essere impostato in diversi modi:

Se l'attributo inset-inline ha due valori:

inset-inline: 10px 50px;
  • La distanza dell'estremità di inizio è di 10px
  • La distanza dell'estremità di fine è di 50px

Se l'attributo inset-inline ha un valore:

inset-inline: 10px;
  • la distanza di inizio e fine dell'estremità sono entrambe di 10px

CSS inset-inline e inset-block proprietà sono simili a CSS 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 di inizio e fine della riga, nonché inset-inline 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'elemento <div> posizionato e l'elemento padre nella direzione della riga:

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

Prova personalmente

Esempio 2

Quando l'attributo writing-mode Quando il valore dell'attributo è impostato su vertical-rl, la direzione della riga è verso il basso. Di conseguenza, l'estremità di inizio dell'elemento si sposta dalla sinistra verso l'alto e l'estremità di fine si sposta dalla destra verso il basso:

div {
  inset-inline: 15px 30px;
  writing-mode: vertical-rl;
}

Prova personalmente

Esempio 3

Quando l'attributo direction Quando il valore dell'attributo è impostato su rtl, la direzione della riga è da destra a sinistra. Di conseguenza, l'estremità di inizio dell'elemento si sposta dalla sinistra destra e l'estremità di fine si sposta dalla destra sinistra:

div {
  inset-inline: 15px 30px;
  direction: rtl;
}

Prova personalmente

Sintassi CSS

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

Valore dell'attributo

Valore Descrizione
auto Valore predefinito. La distanza predefinita di inset-inline 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'asse corrispondente dell'elemento padre.
initial Imposta questa proprietà al suo valore predefinito. Vedi initial.
inherit Eredita questa proprietà dal suo elemento padre. Vedi inherit.

Dettagli tecnici

Valore predefinito: auto
Ereditarietà: No
Creazione dell'animazione: Supportato. Vedi:Proprietà correlate all'animazione.
Versione: CSS3
Sintassi JavaScript: object.style.insetInline="100px 50px"

Supporto del browser

I numeri nella tabella rappresentano la versione del browser che supporta completamente l'attributo.

Chrome Edge Firefox Safari Opera
87.0 87.0 63.0 14.1 73.0

Pagina correlata

Tutorial:Posizionamento CSS

Riferimento:Proprietà CSS position

Riferimento:Proprietà direction CSS

Riferimento:Proprietà writing-mode CSS