Как да добавите Padding към всички страни в Tailwind?

Kak Da Dobavite Padding K M Vsicki Strani V Tailwind



Tailwind CSS е добре позната рамка, която се използва за създаване на адаптивни и отзивчиви уеб страници или дизайни. Той също така позволява на потребителите да контролират оформлението и разстоянието между елементите, без да пишат персонализиран CSS. Padding е пространството между съдържанието на конкретния елемент и неговата граница. Понякога потребителите искат да приложат еднакво количество подложка към всяка страна на елемент. Tailwind предоставя полезни класове за прилагане на подложки към всички страни на елемент или към определени страни, като например отгоре, отдясно, отдолу или отляво.

Тази статия ще илюстрира метода за добавяне на подложки към всички страни на елемент в Tailwind.







Как да добавите подложка към всички страни в Tailwind?

За да добавите подложка към всички страни на определен елемент в Tailwind, направете HTML структура. След това използвайте помощния клас “p-” с конкретния елемент. Изисква се да посочите желаната стойност, за да приложите подложка към елемент. След това проверете HTML уеб страницата, за да се уверите в промените.



Синтаксис



< елемент клас = 'p-<стойност>' ... елемент >


Заменете “<стойност>” с произволно желано число, като 2, 4, 12, 20 и т.н.





Пример

В този пример имаме две „

” елементи и ще приложим две различни подложки, т.е. стр-8 ' и ' стр-14 ' на тях:



< тяло >

< див клас = 'bg-pink-600 p-8 w-max' >
Подложка в Попътен вятър CSS
див >

< бр >

< див клас = 'bg-teal-600 p-14 w-max' >
Подложка в Попътен вятър CSS
див >

тяло >


Тук, в първия

:

    • bg-pink-600 ” задава розовия цвят на фона на елемента
      .
    • стр-8 ” добавя 8-те единици подложка към всички страни на контейнера.
    • w-макс ” клас задава ширината на елемента
      на неговата максимална ширина на съдържанието.

Във втория

:

    • bg-teal-600 ” клас задава сив цвят на фона на елемента
      .
    • стр-14 ” клас прилага 14 единици подложка към всички страни на контейнера.
    • w-макс ” клас задава ширината на елемента
      на неговата максимална ширина на съдържанието.

Изход


Съгласно горния изход, указаната подложка е приложена към всички страни на двата контейнера.

Заключение

За да добавите подложка към всички страни на елемент в Tailwind, помощният клас “p-” се използва с желания елемент в HTML програмата. Потребителите трябва да посочат конкретната стойност, за да приложат подложка към елемент. За проверка вижте HTML уеб страницата и се уверете, че са направени промени. Тази статия е илюстрирала метода за добавяне на подложки към всички страни на елемент в Tailwind.