Własność CSS row-gap

> Dodaj do ulubionych

Własność CSS row-gap określa szerokość odstępu między rzędami elementów w układzie wielokolumnowym CSS, a także w innych rodzajach układów CSS, takich jak CSS Flexbox czy CSS Grid.

Wartości i składnia

Własność row-gap jako wartość przyjmuje liczbę z jednostką długości lub wartość procentową.

normal
W przypadku kontenerów wielokolumnowych słowo to oznacza 1em, a w pozostałych rodzajach układu CSS jest ono równoważne z wartością 0.
Liczba z jednostką długości
Określa konkretną odległość między rzędami elementów w danym rodzaju układu CSS.
Wartość procentowa
Określa odległość między rzędami elementów jako ułamek szerokości kontenera.

Przykłady

Poniższa deklaracja ustawia 60-pikselową odległość między rzędami w układzie CSS Flexbox.


div {
  display: flex;
  flex-wrap: wrap;
  width: 70%;
  row-gap: 60px;
}

Podsumowanie

ZastosowanieKontenery wielokolumnowe, kontenery flex, kontenery grid
Obsługiwane wartościSłowo kluczowe normal, liczba z jednostką długości, wartość procentowa
Wartość początkowanormal
DziedziczenieNie
Specyfikacja CSSCSS Box Alignment Module Level 3, row-gap
Jajko z dzwonkiem

Podoba Ci się ta strona?

Pomóż nam się rozwijać, wykupując płatne konto. Dzięki temu będziemy mogli tworzyć dla Ciebie jeszcze więcej ciekawych treści, a Ty pozbędziesz się reklam.