В этом посте подробно описана полная процедура добавления зазора между столбцами в Tailwind.

Как добавить зазор между столбцами в Tailwind?

Чтобы добавить зазор между столбцами в Tailwind, используйте встроенный « зазор-{размер} ' полезность. Он задает целочисленное значение, представляющее зазор между столбцами по горизонтали и вертикали. Выполним это задание практически с помощью приведенных примеров.

Структура файла проекта
“ зазор-{размер} Утилита может быть реализована в любом из проектов Tailwind, которые следуют заданной файловой структуре:

Начнем с первого примера.

Пример 1. Используйте утилиту «gap-{size}», чтобы добавить одинаковый интервал между строками и столбцами
В этом примере применяется утилита «gap-{size}» для добавления одинакового промежутка по горизонтали и вертикали между заданными столбцами.

HTML-код
Обзор следующего кода:

В приведенных выше строках кода:

• Во-первых, свяжите основной файл CSS « /расстояние/output.css 'с существующим файлом HTML' index.html ' используя ' <ссылка> » в разделе «head».
• Затем в разделе «body» создается элемент «

  », в котором используется « Размер шрифта », « Вес шрифта », « Выравнивание текста », « Оформление текста ', и ' Цвет текста Попутные классы соответственно.

• После этого добавляется элемент «
  », который применяет « сетка », чтобы установить его содержимое в указанное количество макетов сетки, « допуск », чтобы установить горизонтальное поле, и « зазор », чтобы добавить указанный промежуток между столбцами.
• В раздел тела элемента «
  » включены еще восемь элементов «

  », которые используют « Ширина рамки ” и “ Цвет границы классов соответственно.

Выход
Запустите приведенный выше HTML-код на рабочем сервере и проанализируйте вывод:

Как видно, выходные данные добавляют указанный промежуток между столбцами в обоих измерениях соответствующим образом.

Пример 2. Использование утилиты «gap-{size}» для независимого добавления пробела между строками и столбцами
“ зазор-{размер} Утилита также может быть реализована с размерами «x (по горизонтали)» и «y (по вертикали)» как «gap-x-{size}» для строк и «gap-y-{size}» для столбцов, чтобы добавить разрыв между ними по отдельности.

Посмотрим на его практическую реализацию.

HTML-код
Взгляните на данный код:

Здесь « зазор-х-{размер} » добавляет зазор между строками и « зазор-y-{размер} ” самостоятельно добавляет указанный промежуток между столбцами.

Выход

Приведенный выше результат подтверждает, что разрыв между строками и столбцами применяется соответствующим образом.

Заключение

«Tailwind CSS» предоставляет встроенный « зазор-{размер} Утилита для добавления зазора между столбцами. Его также можно использовать для добавления зазора между строками и столбцами отдельно через « зазор-х-{размер} ” и “ зазор-y-{размер} коммунальные услуги. В этом посте описана полная процедура добавления зазора между столбцами в Tailwind.