CSS row-gap egenskab

Definisjon og bruk

row-gap-egenskapen definerer avstanden mellom radene i et elastisk eller gitterlayout.

row-gap-egenskapen het tidligere grid-row-gap.

Se også:

CSS læreplan:CSS gitterlayout

CSS læreplan:CSS elastisk rammelayout

CSS referansehåndbok:gap-egenskapen

CSS referansehåndbok:column-gap-egenskapen

Eksempel

Eksempel 1

Definer 50 pixel avstand mellom rader i et gitterlayout:

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

Prøv det selv

Eksempel 2: Elastisk rammelayout

Sett radavstanden til 70px i et elastisk rammelayout:

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

Prøv det selv

CSS-syntaks

row-gap: length|normal|initial|inherit;
Verdi Beskrivelse
length Sett avstanden mellom radene til en bestemt lengde eller en prosentverdi.
normal Standardverdi. Angir den normale avstanden mellom radene.
initial Sett denne egenskapen til standardverdien. Se også initial.
inherit Arv denne egenskapen fra foreldrelementet. Se også inherit.

Tekniske detaljer

Standardverdi: normal
Arv: Nei
Animasjonsproduksjon: Støttet. Se separate egenskaper. Se også:Animasjonsrelaterte egenskaper.
Versjon: CSS Box Alignment Module Level 3
JavaScript-syntaks: object.style.rowGap="50px"

Nettleserstøtte

Tallene i tabellen angiver den første nettleseren som fullt ut støtter egenskapen.

layout Chrome IE / Edge Firefox Safari Opera
i et gitter 66 16 61 12 53
i et elastisk ramme 84 84 63 14.1 70