В Tailwind CSS отступы используются для добавления пространства между содержимым определенного элемента и его границами. Он добавляет дополнительный интервал внутри элемента. Tailwind CSS предоставляет набор утилит заполнения и значений заполнения, которые позволяют пользователям настраивать интервал между нужными элементами. Кроме того, пользователи могут добавлять отступы к одной стороне, например, к верхней, нижней, левой или правой стороне определенного элемента.
В этом блоге будут показаны примеры добавления отступов к одной стороне элемента в Tailwind CSS.
Как добавить отступы к одной стороне в Tailwind?
Чтобы добавить отступ к одной стороне элемента в Tailwind, можно использовать следующие служебные классы:
Чтобы лучше понять это, ознакомьтесь с приведенными ниже примерами.
Пример 1. Добавление отступов в верхнюю часть элемента
В этом примере мы будем использовать « пт-10 » служебный класс в « <дел> », чтобы добавить 10 единиц отступа вверху:
< тело >< див сорт '=' 'bg-pink-600 pt-10 w-max' >
Прокладка в Попутный ветер CSS
див >
тело >
Выход
Приведенный выше вывод показывает, что отступ был добавлен в верхнюю часть контейнера.
Пример 2. Добавление отступов внизу элемента
В этом примере мы будем использовать « пб-10 ” класс в “ <дел> », чтобы добавить 10 единиц отступа внизу:
< тело >< див сорт '=' 'bg-pink-600 pb-10 w-max' >
Прокладка в Попутный ветер CSS
див >
тело >
Выход
Видно, что на дно контейнера добавлен отступ.
Пример 3. Добавление отступа справа от элемента
В этом примере мы будем использовать « пр-10 ” класс в “ <дел> », чтобы добавить 10 единиц отступа справа от него:
< тело >< див сорт '=' 'бг-розовый-600 пр-10 ш-макс' >
Прокладка в Попутный ветер CSS
див >
тело >
Выход
Приведенный выше вывод показывает, что отступ был добавлен справа от элемента контейнера.
Пример 4. Добавление отступов слева от элемента
В этом примере мы будем использовать « пл-10 ” класс в “ <дел> », чтобы добавить 10 единиц отступа слева от него:
< тело >< див сорт '=' 'bg-pink-600 pl-10 w-max' >
Прокладка в Попутный ветер CSS
див >
тело >
Выход
Можно заметить, что отступ был добавлен слева от контейнера.
Заключение
Чтобы добавить отступ к одной стороне элемента в Tailwind, можно использовать различные служебные классы, такие как « pl-<значение> », « пр-<значение> », « pt-<значение> ', и ' pb-<значение> ». Эти классы добавляют отступы к левой, правой, верхней и нижней сторонам определенного элемента соответственно. Пользователи могут указать разные значения размера заполнения. В этом блоге продемонстрированы примеры добавления отступов к одной стороне элемента в Tailwind CSS.