В этом посте подробно описана полная процедура добавления зазора между столбцами в Tailwind.
Как добавить зазор между столбцами в Tailwind?
Чтобы добавить зазор между столбцами в Tailwind, используйте встроенный « зазор-{размер} ' полезность. Он задает целочисленное значение, представляющее зазор между столбцами по горизонтали и вертикали. Выполним это задание практически с помощью приведенных примеров.
Структура файла проекта
“ зазор-{размер} Утилита может быть реализована в любом из проектов Tailwind, которые следуют заданной файловой структуре:
Начнем с первого примера.
Пример 1. Используйте утилиту «gap-{size}», чтобы добавить одинаковый интервал между строками и столбцами
В этом примере применяется утилита «gap-{size}» для добавления одинакового промежутка по горизонтали и вертикали между заданными столбцами.
HTML-код
Обзор следующего кода:
< голова >
< связь href '=' '/расстояние/output.css' отн. '=' 'таблица стилей' >
< / голова >
< тело >
< h1 сорт '=' 'текст-3xl шрифт-полужирный текст-центр подчеркивания текст-оранжевый-600' > Добро пожаловать в Линуксинт! < / h1 >< бр >
< див сорт '=' 'mx-2 сетка сетка-столбцы-3 зазор-4' >
< див сорт '=' 'граница-2 граница-оранжевая-600' > Первый учебник < / див >
< див сорт '=' 'граница-2 граница-оранжевая-600' > Второй учебник < / див >
< див сорт '=' 'граница-2 граница-оранжевая-600' > Третий учебник < / див >
< див сорт '=' 'граница-2 граница-оранжевая-600' > Четвертый учебник < / див >
< див сорт '=' 'граница-2 граница-оранжевая-600' > Пятый учебник < / див >
< див сорт '=' 'граница-2 граница-оранжевая-600' > Шестой учебник < / див >
< див сорт '=' 'граница-2 граница-оранжевая-600' > Седьмой учебник < / див >
< див сорт '=' 'граница-2 граница-оранжевая-600' > Восьмой учебник < / див >
< / див >
<тело<
В приведенных выше строках кода:
- Во-первых, свяжите основной файл CSS « /расстояние/output.css 'с существующим файлом HTML' index.html ' используя ' <ссылка> » в разделе «head».
- Затем в разделе «body» создается элемент «
», в котором используется « Размер шрифта », « Вес шрифта », « Выравнивание текста », « Оформление текста ', и ' Цвет текста Попутные классы соответственно.
- После этого добавляется элемент «», который применяет « сетка », чтобы установить его содержимое в указанное количество макетов сетки, « допуск », чтобы установить горизонтальное поле, и « зазор », чтобы добавить указанный промежуток между столбцами.
- В раздел тела элемента «
» включены еще восемь элементов «», которые используют « Ширина рамки ” и “ Цвет границы классов соответственно.Выход
Запустите приведенный выше HTML-код на рабочем сервере и проанализируйте вывод:Как видно, выходные данные добавляют указанный промежуток между столбцами в обоих измерениях соответствующим образом.
Пример 2. Использование утилиты «gap-{size}» для независимого добавления пробела между строками и столбцами
“ зазор-{размер} Утилита также может быть реализована с размерами «x (по горизонтали)» и «y (по вертикали)» как «gap-x-{size}» для строк и «gap-y-{size}» для столбцов, чтобы добавить разрыв между ними по отдельности.Посмотрим на его практическую реализацию.
HTML-код
< голова >
Взгляните на данный код:
< связь href '=' '/расстояние/output.css' отн. '=' 'таблица стилей' >
< / голова >
< тело >
< див сорт '=' 'mx-2 сетка сетка-столбцы-4 зазор-x-4 зазор-y-6' >
< див сорт '=' 'граница-2 граница-оранжевая-600' >Первое руководство< / див >
< див сорт '=' 'граница-2 граница-оранжевая-600' >Второй учебник< / див >
< див сорт '=' 'граница-2 граница-оранжевая-600' >Третий урок< / див >
< див сорт '=' 'граница-2 граница-оранжевая-600' >Четвертый урок< / див >
< див сорт '=' 'граница-2 граница-оранжевая-600' >Пятое руководство< / див >
< див сорт '=' 'граница-2 граница-оранжевая-600' >Шестое руководство< / див >
< див сорт '=' 'граница-2 граница-оранжевая-600' >Седьмой урок< / див >
< див сорт '=' 'граница-2 граница-оранжевая-600' >Восьмой урок< / див >
< / див >
< тело >Здесь « зазор-х-{размер} » добавляет зазор между строками и « зазор-y-{размер} ” самостоятельно добавляет указанный промежуток между столбцами.
Выход
Приведенный выше результат подтверждает, что разрыв между строками и столбцами применяется соответствующим образом.
Заключение
«Tailwind CSS» предоставляет встроенный « зазор-{размер} Утилита для добавления зазора между столбцами. Его также можно использовать для добавления зазора между строками и столбцами отдельно через « зазор-х-{размер} ” и “ зазор-y-{размер} коммунальные услуги. В этом посте описана полная процедура добавления зазора между столбцами в Tailwind.
- В раздел тела элемента «