Proprietà CSS inset-block

Pagina precedente inset
Pagina successiva inset-block-end

Definizione e uso

inset-block L'elemento di impostazione delle proprietà è distante dal padre nell'orientamento del blocco.

Attenzione:Per far funzionare questo attributo, è necessario specificare position attributi.

inset-block L'attributo è un abbreviazione di diversi attributi seguenti:

inset-block-start
inset-block-end

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

Se l'attributo inset-block ha due valori:

inset-block: 10px 50px;

La distanza iniziale è di 10px
La distanza finale è di 50px

Se l'attributo inset-block ha un valore:

inset-block: 10px;

le distanze di inizio e fine sono entrambe di 10px

CSS dell'inset-block e inset-inline le proprietà sono equivalenti a top,bottom,left e right L'attributo è molto simile, ma inset-block e inset-inline L'attributo dipende dalla direzione del blocco e della direzione inline.

Attenzione:proprietà CSS correlate writing-mode Definisce la direzione del blocco. Questo influisce sulla posizione iniziale e finale del blocco, nonché inset-block Risultato dell'attributo. Per le pagine in inglese, la direzione del blocco è verso il basso, e la direzione inline è da sinistra a destra.

Esempio

Esempio 1

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

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

Prova da solo

Esempio 2

Quando l'elemento <div> ha writing-mode Quando l'attributo value è impostato a vertical-rl, la posizione iniziale dell'elemento si sposta da sopra a destra, e la posizione finale si sposta da sotto a sinistra:

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

Prova da solo

Sintassi CSS

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

Valore dell'attributo

Valore	Descrizione
auto	Valore predefinito. Valore predefinito di inset-block 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 questo attributo al suo valore predefinito. Vedi initial.
inherit	Eredita questo attributo dal suo elemento padre. Vedi inherit.

Dettagli tecnici

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