Atrybut row-gap w CSS

definicja i użycie

właściwość row-gap określa przestrzeń między wierszami w układzie elastycznym lub siatki.

właściwość row-gap była wcześniej nazywana grid-row-gap.

patrz również:

lekcja CSSukład siatkowy CSS

lekcja CSSukład elastyczny CSS

podręcznik CSSwłaściwość gap

podręcznik CSSwłaściwość column-gap

przykład

przykład 1

określ 50-pikselową przestrzeń między wierszami siatki:

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

spróbuj sam

przykład 2: układ elastyczny

ustaw odległość między wierszami w układzie elastycznym na 70px:

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

spróbuj sam

gramatyka CSS

row-gap: length|normal|initial|dziedziczenie;
wartość opis
length ustaw przestrzeń między wierszami na określony długość lub wartość procentową.
normal domyślna wartość. Określa normalną przestrzeń między wierszami.
initial ustaw tę właściwość na jej wartość domyślną. Zobacz: initial.
dziedziczenie odziedzicz tę właściwość od elementu nadrzędnego. Zobacz: dziedziczenie.

szczegóły techniczne

domyślna wartość: normal
dziedziczenie: nie
produkcja animacji: obsługiwane. Zobacz osobne właściwości. Zobacz:właściwości związane z animacją.
wersja: Moduł wyważania boków pudełka poziomego 3
Gramatyka JavaScript: object.style.rowGap="50px"

obsługa przeglądarki

liczby w tabeli wskazują pierwszą wersję przeglądarki, która obsługuje tę właściwość.

układ Chrome IE / Edge Firefox Safari Opera
w siatce 66 16 61 12 53
w ramce elastycznej 84 84 63 14.1 70