В Tailwind CSS допуск используется для управления расстоянием вокруг определенного элемента. Он добавляет пространство между применяемым элементом и окружающими его элементами. Tailwind CSS предоставляет набор утилит и значений полей, которые позволяют пользователям настраивать интервал вокруг нужных элементов. Кроме того, пользователи могут добавлять поля к одной стороне, например, к верхней, нижней, левой или правой стороне определенного элемента.
В этом блоге будут показаны примеры добавления полей к одной стороне элемента в Tailwind CSS.
Как добавить поле к одной стороне в Tailwind?
Чтобы добавить поле к одной стороне элемента в Tailwind, можно использовать следующие служебные классы:
Чтобы лучше понять это, просмотрите приведенные ниже примеры.
Пример 1. Добавление поля вверху элемента
В этом примере мы будем использовать « МТ-14 » служебный класс в « <дел> », чтобы добавить 14 единиц поля вверху:
< тело >< див сорт '=' 'ч-96 мт-14 бг-фиолетовый-500' >
< п сорт '=' 'текст-5xl текст-центр' > Допуск в Попутный ветер CSS п >
див >
тело >
Здесь:
-
- “ ч-96 ” устанавливает высоту контейнера в 96 единиц.
- “ МТ-14 ” применяет 14 единиц поля к верхней части контейнера.
- “ бг-фиолетовый-500 » задает фиолетовый цвет фона контейнера.
Выход
Приведенный выше вывод показывает, что поле было добавлено к верхней части контейнера.Пример 2. Добавление поля внизу элемента
В этом примере мы будем использовать « мб-14 ” класс в “ <дел> », чтобы добавить 14 единиц поля внизу:
< тело >
< див сорт '=' 'ч-96 мб-14 бг-фиолетовый-500' >
< п сорт '=' 'текст-5xl текст-центр' > Допуск в Попутный ветер CSS п >
див >
тело >
Выход
Видно, что поля были добавлены к нижней части контейнера.Пример 3. Добавление поля слева от элемента
В этом примере мы будем использовать « мл-14 ” класс в “ <дел> », чтобы добавить 14 единиц поля слева от него:
< тело >
< див сорт '=' 'ч-96 мл-14 бг-фиолетовый-500' >
< п сорт '=' 'текст-5xl текст-центр' > Допуск в Попутный ветер CSS п >
див >
тело >
Выход
Приведенный выше вывод показывает, что поле было добавлено слева от элемента контейнера.Пример 4. Добавление поля справа от элемента
В этом примере мы будем использовать « мр-14 ” класс в “ <дел> », чтобы добавить 14 единиц поля справа от него:
< тело >
< див сорт '=' 'ч-96 мр-14 бг-фиолетовый-500' >
< п сорт '=' 'текст-5xl текст-центр' > Допуск в Попутный ветер CSS п >
див >
тело >
Выход
Как видите, поле эффективно добавлено справа от контейнера.Заключение
Чтобы добавить поле к одной стороне элемента в Tailwind, можно использовать различные служебные классы, такие как « мл-<значение> », « г-<значение> », « mt-<значение> ', и ' мб-<значение> ». Эти классы добавляют поля к левой, правой, верхней и нижней сторонам определенного элемента соответственно. Пользователи могут указать различные значения размера поля. В этом блоге продемонстрированы примеры добавления полей к одной стороне элемента в Tailwind CSS.
- “ ч-96 ” устанавливает высоту контейнера