Właściwość CSSFlexbox
row-gap
Ustawia odstęp między wierszami w kontenerze flex lub grid.
- Wartość domyślna
normal- Dziedziczona
- Nie
- Animowalna
- tak, jako długość lub procent
- Dotyczy
- kontenery flex, grid i wielokolumnowe
- JavaScript
element.style.rowGap = "20px"
Przykład
#CSS
.form {
display: grid;
row-gap: 14px;
}HTML przykładu
<form class="form stage">
<input placeholder="Imię">
<input placeholder="E-mail">
<button type="submit">Zapisz się</button>
</form>Podgląd
Definicja i zastosowanie
#Właściwość row-gap dodaje odstęp między kolejnymi wierszami, czyli w pionie przy zwykłym kierunku pisania. W kontenerze flex ma znaczenie dopiero wtedy, gdy elementy zawijają się do kilku linii.
Jest częścią skrótu gap. Używaj jej osobno, gdy chcesz zmienić tylko odstęp pionowy, na przykład na mniejszych ekranach.
Starsza nazwa grid-row-gap nadal działa w przeglądarkach jako alias, ale w nowym kodzie pisz po prostu row-gap.
Składnia
#Składnia
row-gap: normal | <długość> | <procent>;Wartości
#Wartości w praktyce
#normal
Brak odstępu między wierszami w Flexboxie i Gridzie.
.demo { row-gap: normal; }8px
Mały odstęp między wierszami.
.demo { row-gap: 8px; }28px
Duży odstęp między wierszami, kolumny bez zmian.
.demo { row-gap: 28px; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Pionowe odstępy między polami formularza najprościej ustawić przez
display: gridirow-gap. - W jednoliniowym kontenerze flex
row-gapnic nie zmienia, bo nie ma drugiego wiersza.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.