Proprietà CSS row-gap

Definizione e uso

La proprietà row-gap determina lo spazio tra le righe nel layout a riquadro o a griglia.

La proprietà row-gap era precedentemente chiamata grid-row-gap.

Vedi anche:

Lezione CSS:Layout a griglia CSS

Lezione CSS:Layout a riquadro CSS

Manuale CSS:Proprietà gap

Manuale CSS:Proprietà column-gap

Esempio

Esempio 1

Stabilisci uno spazio di 50 pixel tra le righe della griglia:

#grid-container {
  display: grid;
  row-gap: 50px;
}

Prova a farlo tu stesso

Esempio 2: Layout a riquadro

Imposta lo spazio tra le righe nel layout a riquadro a 70px:

#flex-container {
  display: flex;
  row-gap: 70px;
}

Prova a farlo tu stesso

Sintassi CSS

row-gap: length|normal|initial|inherit;
Valore Descrizione
length Imposta la lunghezza specifica o il valore percentuale dello spazio tra le righe.
normal Valore predefinito. Regola lo spazio normale tra le righe.
initial Imposta questa proprietà al suo valore predefinito. Vedi: initial.
inherit Eredita questa proprietà dal suo elemento padre. Vedi: inherit.

Dettagli tecnici

Valore predefinito: normal
Ereditarietà: no
Produzione di animazione: Supportato. Vedi le proprietà singole. Vedi anche:Proprietà correlate all'animazione.
Versione: Modulo di allineamento dei box CSS livello 3
Sintassi JavaScript: object.style.rowGap="50px"

Supporto del browser

I numeri nella tabella indicano la versione del browser iniziale che supporta questa proprietà.

layout Chrome IE / Edge Firefox Safari Opera
nella griglia 66 16 61 12 53
nel riquadro elastico 84 84 63 14.1 70