В этом блоге представлена идея распределения одинакового пространства между несколькими элементами в Tailwind.
Как назначить одинаковое пространство между несколькими элементами в Tailwind?
Пользователи могут назначать равные расстояния между элементами, используя « пространство-{x/y}-{размер} » Класс полезности. Пользователи могут добавить пространство по оси X или Y, указав целочисленное значение. Утилита пробелов необходима, потому что она делает веб-страницу привлекательной. Если на веб-странице нет правильного расстояния между элементами, она не привлечет пользователей.
Давайте возьмем пример кода, чтобы назначить одинаковое пространство между элементами сетки.
Способ 1: назначение пространства по оси X.
Равное пространство, назначенное на оси X, обеспечивает одинаковое расстояние справа и слева от элемента. Чтобы назначить пространство по оси X, используйте следующий синтаксис:
космос - Икс - { размер }
Размер может быть любым целочисленным значением.
Рассмотрим приведенный ниже код, чтобы назначить равное пространство по оси X:
< тело >< div сорт '=' 'сетка mx-4, сетка-cols-4, пробел-x-4' >
< div сорт '=' 'bg-green-400 h-16 округлый-lg border-2 border-green-800' > 1 div >
< div сорт '=' 'bg-green-400 h-16 округлый-lg border-2 border-green-800' > 2 div >
< div сорт '=' 'bg-green-400 h-16 округлый-lg border-2 border-green-800' > 3 div >
< div сорт '=' 'bg-green-400 h-16 округлый-lg border-2 border-green-800' > 4 div >
div >
тело >
В этом коде:
- « мх-4 » добавляет поле в 4 пикселя по оси X (справа и слева).
- « сетка Класс ” создает сетку.
- « сетка-столбцы-4 » сделайте в сетке 4 столбца.
- « пробел-х-4 » добавляет пространство в 4 пикселя между элементами сетки.
- « bg-зеленый-400 » устанавливает зеленый цвет фона.
- « ч-16 » устанавливает высоту 16 пикселей.
- « округлый-LG » делает угол круглым, а радиус границы большим.
- « граница-2 » создает рамку толщиной 2 пикселя вокруг элемента.
- « граница-зеленый-800 » делает границу темно-зеленой.
Выход
Предварительный просмотр вывода, созданного приведенным выше кодом:
Видно, что между элементами задано расстояние в 4 пикселя.
Способ 2. Назначение места по оси Y.
Интервал может быть назначен по оси Y аналогично описанному выше методу путем небольших изменений в приведенном выше коде. Он назначает пробелы вдоль оси Y (сверху и снизу). Синтаксис для него:
Приведенный ниже код можно реализовать для добавления пробелов вдоль оси Y:
< тело >< div сорт '=' 'мх-4 мой-4 космос-у-4' >
< div сорт '=' 'bg-green-400 h-16 округлый-lg border-2 border-green-800' > 1 div >
< div сорт '=' 'bg-green-400 h-16 округлый-lg border-2 border-green-800' > 2 div >
< div сорт '=' 'bg-green-400 h-16 округлый-lg border-2 border-green-800' > 3 div >
< div сорт '=' 'bg-green-400 h-16 округлый-lg border-2 border-green-800' > 4 div >
div >
тело >
В этом коде:
- « мх-4 » добавляет поля размером 4 пикселя слева и справа от элементов, чтобы сделать вывод более оптимизированным.
- « мой-4 » добавляет поле размером 4 пикселя по оси Y (сверху и снизу).
- « космос-y-4 » добавляет пространство в 4 пикселя по оси Y (сверху и снизу).
Выход
Сохраните приведенный выше код и просмотрите созданную им веб-страницу, чтобы увидеть интервал как:
Это все о назначении равного пространства между элементами.
Заключение
Чтобы назначить одинаковое пространство между несколькими элементами в Tailwind, пользователи могут использовать « пространство-{x/y}-{размер} » и укажите в качестве размера целочисленное значение в соответствии с требованиями. Равное расстояние между элементами делает результат более масштабируемым, и зрители продолжают интересоваться веб-страницей. В этом посте представлен метод назначения одинакового пространства между несколькими элементами в Tailwind.