Proprietà CSS inset-block-start

Corso raccomandato:

inset-block-start Definizione e uso

Attenzione:imposta la distanza tra l'estremità iniziale 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à corrispondono all'attributo di 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 delle righe.

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

Esempio

Esempio 1

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

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

Prova tu stesso

Esempio 2

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

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

Prova tu stesso

Sintassi CSS

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

Valore dell'attributo

Valore Descrizione
auto Valore predefinito. Usa la distanza inset predefinita dell'elemento.
length

Specificare la distanza utilizzando unità fisse (come px, pt, cm, ecc.). Permettono valori negativi.

Vedi:Unità CSS.
% Specificare la distanza utilizzando una percentuale, rispetto alla dimensione dell'elemento padre sull'asse corrispondente.
initial Imposta questa proprietà al suo valore predefinito. Vedi: initial.
inherit Incorpora questa proprietà dall'elemento padre. Vedi: inherit.

Dettagli tecnici

Valore predefinito: auto
Ereditarietà: No
Produzione di animazioni: Supporto. Vedi:Proprietà correlate agli animazioni.
Versione: CSS3
Sintassi JavaScript: object.style.insetBlockStart="100px"

Supporto del browser

Le numeri nella tabella rappresentano la versione del browser che supporta completamente questa proprietà.

Chrome Edge Firefox Safari Opera
87.0 87.0 63.0 14.1 73.0

Pagine correlate

Tutorial:Posizionamento CSS

Riferimento:Proprietà CSS position

Riferimento:Proprietà CSS writing-mode