В Tailwind CSS подложката се използва за добавяне на пространство между съдържанието на конкретния елемент и неговите граници. Добавя допълнително разстояние вътре в елемента. Tailwind CSS предоставя набор от помощни програми за подложки и стойности за подложки, които позволяват на потребителите да персонализират разстоянието на желаните елементи. Освен това потребителите могат да добавят подложка към една страна, като например горната, долната, лявата или дясната част на определен елемент.
Този блог ще демонстрира примерите за добавяне на подложка към една страна на елемент в Tailwind CSS.
Как да добавите подложка към една страна в Tailwind?
За да добавите подложка към една страна на елемент в Tailwind, могат да се използват следните класове на помощ:
За да го разберете по-добре, вижте дадените по-долу примери.
Пример 1: Добавяне на Padding в горната част на елемент
В този пример ще използваме „ точка-10 ” полезен клас в „ Пример 2: Добавяне на Padding в долната част на елемент В този пример ще използваме „ pb-10 ” клас в „ Пример 3: Добавяне на Padding отдясно на елемент В този пример ще използваме „ пр-10 ” клас в „ Пример 4: Добавете подложка отляво на елемент В този пример ще използваме „ pl-10 ” клас в „ За да добавите подложка към една страна на елемент в Tailwind, могат да се използват различни помощни класове, като например „ pl-<стойност> ”, “ pr-<стойност> ”, “ pt-<стойност> ', и ' pb-<стойност> ”. Тези класове добавят подложка към лявата, дясната, горната и долната страна на конкретния елемент съответно. Потребителите могат да задават различни стойности за размера на подложката. Този блог демонстрира примери за добавяне на подложка към една страна на елемент в Tailwind CSS.
< див клас = 'bg-розово-600 pt-10 w-max' >
Подложка в Попътен вятър CSS
див >
тяло >
Изход
Горният резултат показва, че подложката е добавена към горната част на контейнера.
< див клас = 'bg-pink-600 pb-10 w-max' >
Подложка в Попътен вятър CSS
див >
тяло >
Изход 
Може да се види, че подложката е добавена към дъното на контейнера.
< див клас = 'bg-pink-600 pr-10 w-max' >
Подложка в Попътен вятър CSS
див >
тяло >
Изход 
Горният изход показва, че подложката е добавена отдясно на контейнерния елемент.
< див клас = 'bg-pink-600 pl-10 w-max' >
Подложка в Попътен вятър CSS
див >
тяло >
Изход 
Може да се види, че подложката е добавена отляво на контейнера. Заключение