Odstęp kolumn {column-gap}
W jaki sposób ustalić odstęp pomiędzy dwiema kolumnami tekstu?
CSS 3
selektor { column-gap: szerokość }
Szerokość jest wyrażona w jednostkach długości i nie może być mniejsza od zera. Aby wymusić domyślny odstęp, należy podać wartość normal.
Sąsiadujące kolumny z tekstem nie powinny do siebie bezpośrednio przylegać, gdyż wywołałoby to zlewanie się tekstu na krawędzi kolumn. Temu nieprzyjemnemu efektowi może skutecznie zapobiegać przerwa między kolumnami. Warto mieć na uwadze, że wartość domyślna tego odstępu (normal) zależy od konkretnej przeglądarki i wcale nie musi być równa zero.
W obecnej wersji specyfikacja CSS nie pozwala ustalać różnego odstępu kolumn tego samego elementu.
Przykład {column-gap}
columns: 3; column-gap: 1em;
To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie...
To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie...
Przeglądarki
Chrome | Firefox | Edge | Opera | Safari | |
---|---|---|---|---|---|
column-gap: wartość | 1 2008-12-11 | 1.5 2005-11-29 | 12 2015-07-29 | 11.1 2011-04-12 | 3 2007-10-26 |