Proprietà CSS inline-size

Definizione e uso

inline-size L'attributo specifica la dimensione dell'elemento nella direzione in linea.

Attenzione:Proprietà CSS correlate writing-mode Definisce la direzione in linea, che influisce su inline-size Il risultato dell'attributo. Per le pagine in inglese, la direzione in linea è da sinistra a destra, mentre la direzione in blocco è verso il basso.

L'attributo di CSS inline-size e block-size L'attributo è simile a CSS width e height L'attributo è molto simile ma inline-size e block-size L'attributo dipende dalla direzione in linea e dalla direzione in blocco.

Esempio

Esempio 1

Impostare la dimensione dell'elemento <div> nella direzione in linea:

div {
  inline-size: 200px;
}

Prova te stesso

Esempio 2

quando l'elemento <div> writing-mode Il valore dell'attributo è impostato su vertical-rl quando, la direzione in linea cambia da orizzontale a verticale verso il basso, influisce su inline-size Come funziona l'attributo:

div {
  inline-size: 250px;
  writing-mode: vertical-rl;
}

Prova te stesso

Sintassi CSS

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

Valore dell'attributo

Valore Descrizione
auto Valore predefinito. Valore predefinito dell'inline-size dell'elemento.
length

Specificare la dimensione della direzione in linea, espressa in px, pt, cm ecc.

E' possibile utilizzare valori negativi. Vedi:Unità CSS.
% Specificare la percentuale della dimensione dell'asse corrispondente rispetto all'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 di animazioni: Supporto. Vedi:Proprietà correlate agli animazioni.
Versione: CSS3
Sintassi JavaScript: object.style.inlineSize="250px"

Supporto del browser

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

Chrome Edge Firefox Safari Opera
57.0 79.0 41.0 12.1 44.0

Pagine correlate

Tutorial CSS:Altezza e larghezza CSS

Tutorial CSS:Modello di cornice CSS

Riferimento CSS:Proprietà height

Riferimento CSS:Proprietà width

Riferimento CSS:Proprietà writing-mode