Własność CSS column-gap określa szerokość odstępu między kolumnami w układzie wielokolumnowym CSS, a także w innych rodzajach układów CSS, takich jak Flexbox CSS czy Grid.
Kiedyś własność ta odnosiła się wyłącznie do elementów w układzie wielokolumnowym CSS, ale później rozszerzono jej definicję tak, aby obejmowała wszystkie rodzaje układu CSS.
Wartości i składnia
Własność column-gap
jako wartość przyjmuje słowo kluczowe normal, 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 kolumnami w danym rodzaju układu CSS.
- Wartość procentowa
- Określa odległość między kolumnami jako ułamek szerokości kontenera.
Przykłady
Poniższa deklaracja ustawia 60-pikselową odległość między kolumnami w układzie wielokolumnowym.
div {
columns: 3;
column-gap: 60px;
}
Podsumowanie
Zastosowanie | Kontenery wielokolumnowe, kontenery Flexbox, kontenery Grid |
---|---|
Obsługiwane wartości | Słowo kluczowe normal , liczba z jednostką długości, wartość procentowa |
Wartość początkowa | normal |
Dziedziczenie | Nie |
Specyfikacja CSS | CSS Box Alignment Module Level 3, column-gap |