Właściwość CSS column-gap

Definicja stylu, przeznaczenie i użycie column-gap

Styl column-gap określa odstęp między kolumnami.

Uwaga: jeśli między kolumnami znajduje się właściwość column-rule, pojawi się ona pośrodku luki.

Wartości właściwości column-gap

Wartość	Opis
length	Określona długość, która ustawi odstęp między kolumnami.
normal	Definiuje normalną przerwę między kolumnami. W3C sugeruje wartość 1em. Wartość domyślna.
initial	Ustawia tę właściwość na jej wartość domyślną.
inherit	Dziedziczy tę właściwość z elementu nadrzędnego.

Składnia CSS column-gap

column-gap: length | normal | initial | inherit;

Wsparcie przeglądarek dla właściwości column-gap

Liczba w tabeli określa pierwszą wersję przeglądarki w pełni obsługującą tę właściwość.

Liczba przed -webkit-, -moz- określa pierwszą wersję, która działała z prefiksem.

Właściwość
column-gap (w wielu kolumnach)	50.0	10.0	52.0	10.0	37.0
column-gap (w siatce)	66.0	16.0	61.0	12.1	63.0
column-gap (we flexbox)	84.0	94.0	63.0	Niewspierany	70.0

Przykładowe zastosowania z właściwością column-gap

Kliknij wartości właściwości poniżej, aby zobaczyć wynik.

Rezultat:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Kod CSS:

div {
    column-count:3;
    column-gap:1px;
}