html.okpython.net
Основы создания сайтов
CSS :: Свойство column-gap
css-свойство column-gap (от англ. column gap – интервал между колонками) задает расстояние между колонками в многоколоночном элементе.
Характеристики
- Значение по умолчанию: normal.
- Применяется: к многоколоночным элементам, flex-контейнерам, grid-контейнерам.
- Наследуется: нет.
- Анимируется: да.
- JavaScript: object.style.columnGap="value".
Синтаксис
column-gap: normal | <интервал>
Значения
- normal – браузер будет устанавливать интервал между колонками автоматически.
- интервал – любые доступные в CSS единицы измерения (смотреть). Отрицательные значения не допускаются.
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/css-multicol-1/#cg
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/column-gap
Примеры
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> p{ width: 400px; height: 300px; margin: 1em; padding: 0.7em; border: 1px solid green; column-count: 3; } .p_1{column-gap: normal;} .p_2{column-gap: 5em;} </style> </head> <body> <p class="p_1"> Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </p> <p class="p_2"> Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </p> </body> </html>
Пример №1