Własność CSS column-gap

> Dodaj do ulubionych

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

ZastosowanieKontenery wielokolumnowe, kontenery Flexbox, 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, column-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.