Kuidas Tailwindis kõikidele külgedele polsterdust lisada?

Kuidas Tailwindis Koikidele Kulgedele Polsterdust Lisada



Tailwind CSS on tuntud raamistik, mida kasutatakse kohandatavate ja tundlike veebilehtede või kujunduste loomiseks. Samuti võimaldab see kasutajatel juhtida elementide paigutust ja vahesid ilma kohandatud CSS-i kirjutamata. Polsterdus on ruum konkreetse elemendi sisu ja selle äärise vahel. Mõnikord soovivad kasutajad elemendi igale küljele rakendada sama palju polsterdust. Tailwind pakub utiliidiklasse polsterduse rakendamiseks elemendi kõikidele külgedele või teatud külgedele, nagu ülemine, parem, alumine või vasakpoolne.

See artikkel kirjeldab Tailwindis elemendi kõikidele külgedele polsterduse lisamise meetodit.





Kuidas lisada taganttuules kõikidele külgedele polsterdust?

Tailwindis konkreetse elemendi kõikidele külgedele polsterduse lisamiseks looge HTML-struktuur. Seejärel kasutage konkreetse elemendiga utiliidiklassi 'p-'. Elemendile polsterduse rakendamiseks tuleb määrata soovitud väärtus. Järgmisena vaadake muudatuste tagamiseks HTML-i veebilehte.



Süntaks



< element klass = 'p-' ... element >


Asendage “” mis tahes soovitud numbriga, näiteks 2, 4, 12, 20 jne.



Näide

Selles näites on meil kaks '

” elemente ja rakendame kahte erinevat polsterdust, st. p-8 ” ja „ p-14 ” nende peal:



< keha >

< div klass = 'bg-pink-600 p-8 w-max' >
Polsterdus sisse Tailtuule CSS
div >

< br >

< div klass = 'bg-teal-600 p-14 w-max' >
Polsterdus sisse Tailtuule CSS
div >

keha >


Siin, esimeses

:

    • “ bg-roosa-600 ” klass määrab roosa värvi elemendi
      taustale.
    • “ p-8 ” klass lisab konteineri kõikidele külgedele 8 ühikut polsterdust.
    • “ w-max ” klass määrab elemendi
      laiuseks selle maksimaalse sisulaiuse.

Teises

:

    • “ bg-teal-600 ” klass määrab elemendi
      taustale sinakaspruuni värvi.
    • “ p-14 ” klass rakendab konteineri kõikidele külgedele 14 ühikut polsterdust.
    • “ w-max ” klass määrab elemendi
      laiuseks selle maksimaalse sisulaiuse.

Väljund


Vastavalt ülaltoodud väljundile on mõlema konteineri kõikidele külgedele rakendatud määratud polster.

Järeldus

Tailwindis elemendi kõikidele külgedele polsterduse lisamiseks kasutatakse HTML-programmis koos soovitud elemendiga utiliidiklassi p-. Kasutajad peavad elemendile polsterduse rakendamiseks määrama konkreetse väärtuse. Kontrollimiseks vaadake HTML-i veebilehte ja veenduge muudatuste tegemises. See artikkel on näide meetodi kohta, kuidas lisada Tailwindis elemendi kõikidele külgedele polster.

muud

Kategooria

Lemmik Postitused

Raspberry Pi kaugjuurdepääs Interneti kaudu

C++ Unordered_Map::Find() Funktsioon

Kuidas käsurea abil MySQL-iga ühendust luua?

C++ string::at() Funktsioon

Logige Ubuntus sisse juurna

Kuidas saada ja määrata sisendteksti väärtus JavaScriptis

Kuidas kasutada AWS-i CLI-s käsku „describe-images”?

Kuidas Pydanticus nõutavaid välju määratleda

Kuidas Tailwindis ülekerimisega meediumipäringuid ja katkestuspunkte rakendada?

Kuidas muuta kursor CSS-i abil hõljukil pildiks

Kas saate aru Node.js-i blokeerimisest?

Kuidas rakendada MongoDB georuumilisi funktsioone

C# programm numbri ruutjuure leidmiseks

Kuidas lahendada Windows 10 Wi-Fi probleem 'Ei saa selle võrguga ühendust luua'.

Mis on C++ liidesed

Kuidas Pythoni abil Raspberry Pi faile loetleda

Kuidas iPhone'is ekraani salvestada

Kuidas kasutada PHP-s funktsiooni 'array_intersect_key()'.

Kuidas sortida 2d massiivi Javas

Parandage Androidi Kali Linuxis käsuviga „Uuenda ja uuenda