Verktyg för inre marginaler

Utfyllnad är utrymmet mellan ett elements innehåll och dess kantlinje. Den ingår i CSS-boxmodellen: varje element har lager för innehåll, utfyllnad, kantlinje och marginal. Utfyllnad skapar luft inuti ett element – en knapp utan utfyllnad har texten tryckt mot kanterna, medan py-2 px-4 skapar bekvämt vertikalt och horisontellt utrymme runt etiketten.

Verktyget p-* tillämpar lika stor utfyllnad på alla fyra sidor av ett element samtidigt. p-4 anger 16 px upptill, till höger, nedtill och till vänster. Detta är den vanligaste utgångspunkten för kort, modalfönster och sektionsbehållare. Använd p-0 för att uttryckligen ta bort all utfyllnad när en ärvd eller förvald stil lägger till oönskat utrymme.

Styr utfyllnaden på de horisontella och vertikala axlarna separat. px-* lägger till utfyllnad till vänster och höger (padding-left och padding-right i CSS). py-* lägger till utfyllnad upptill och nedtill. Detta är viktigt för knappar, navigeringsobjekt och pillerformade märken där Ni vill ha större horisontell än vertikal utfyllnad, eller för sektioner där utfyllnaden upptill och nedtill skiljer sig från den till vänster och höger.

För exakt kontroll kan Ni tillämpa utfyllnad på enskilda sidor. pt-* är padding-top, pr-* är padding-right, pb-* är padding-bottom och pl-* är padding-left. Kombinera dem fritt för att skapa asymmetrisk utfyllnad. Ett vanligt fall är att lägga till extra utfyllnad upptill i en sektion som behöver fritt utrymme under en fastklistrad navbar: pt-20 (80 px) tar hänsyn till en navbar på 64 px samt extra luft.

Ni kan kombinera verktyg för axlar och sidor. Börja med px-6 py-4 för generell padding och åsidosätt sedan en specifik sida. Ett listobjekt med en ikon till vänster kan till exempel använda px-4 py-3 pl-12 — pl-12 åsidosätter den vänstra paddingen från px-4 och skapar extra utrymme för ikonen utan att påverka den högra paddingen.

En viktig skillnad är att padding finns inuti elementet (påverkar det klickbara/tryckbara området och bakgrundsfärgens utbredning), medan margin finns utanför (skapar utrymme mellan element). För klickbara element som knappar och länkar ska Ni alltid använda padding — det utökar träffområdet och området med färgad bakgrund. Använd margin för att skilja en komponent från en annan.

Formulärfält kräver noggrant avvägd padding för att vara både lättlästa och visuellt balanserade. Textfält använder vanligtvis px-3 py-2 eller px-4 py-2.5 för ett bekvämt textfält. Större fält för rich text eller sökfält kan använda px-4 py-3. Kombinera alltid padding för inmatningsfält med ett rounded-verktyg och en border för att visuellt avgränsa fältet.

Padding för sektioner ökar ofta vid större visningsytor. Använd responsiva prefix för att skapa denna skalningseffekt. En behållare kan ha px-4 py-8 på mobilen, md:px-8 md:py-16 på surfplattor och lg:px-16 lg:py-24 på datorer. Denna gradvisa ökning av tomutrymmet är ett viktigt kännetecken för professionella och luftiga layouter på datorer.

När Ni använder flex- eller gridlayouter lägger Ni vanligtvis inte padding på behållaren, utan använder gap-* mellan underordnade element. Padding på själva behållaren skapar dock jämna inre marginaler från behållarens kanter. Kombinationen av p-6 på en gridbehållare och gap-4 mellan objekten ger en visuellt balanserad layout med jämnt upplevda avstånd överallt.

Navigeringsobjekt behöver padding som skapar en bekväm tryckyta (minst 44 px hög enligt Apples riktlinjer) samtidigt som navigeringen förblir visuellt kompakt. En navigeringslänk med py-2 px-4 får 8 px vertikal och 16 px horisontell padding. Länkens synliga område med text och padding uppfyller vanligtvis kravet på tryckyta. Lägg till hover:bg-gray-100 rounded-lg för visuell återkoppling.

För stöd för höger-till-vänster-språk (RTL) lade Tailwind v3.3 till verktyg för logiska egenskaper: ps-* (padding-inline-start) och pe-* (padding-inline-end). I LTR motsvarar ps-4 pl-4. I RTL blir ps-4 automatiskt pr-4. Använd ps-* och pe-* i stället för pl-* och pr-* när Ni bygger globalt tillgängliga applikationer.

I den här lektionen har Ni lärt Er att: p-* tillämpar enhetlig padding på alla fyra sidor, px-* och py-* styr horisontella och vertikala axlar oberoende av varandra och pt-*, pr-*, pb-*, pl-* riktar sig mot enskilda sidor för asymmetrisk padding. Nästa steg är att använda margin-verktyg och lära sig hur automatiska marginaler möjliggör horisontell centrering.