CMS Styling - Padding och Marginaler
Många sektioner i din plattform kommer att ha styling för padding och/eller marginaler som standard.
Padding avser utrymmet/avståndet mellan t.ex. en text/bild/ikon och kanterna inom den behållare/box texten/bilden/ikonen finns.
Marginaler avser utrymmet/avståndet som finns utanför denna behållare/box.
Guiden nedan förklarar hur du kan redigera padding och marginaler, vilket gör det möjligt att justera layouten för allt på din plattform.
Observera att vissa element/sektioner på din plattform redan har styling för padding/marginaler, så i så fall bör du redigera den befintliga stylingen i stället för att lägga till ny styling.
Om du vill ha mer information om CMS-styling kan du söka i Tailwind CSS-guiderna som finns tillgängliga på https://tailwindcss.com/docs .
När vi lägger till padding läggs det till tomt utrymme vid samtliga kanterna på den "box" inom vilken texten/bilden/ikonen finns.
Vi använder stylingformatet p-# (t.ex. p-2 eller p-4 för att lägga till lika mycket utrymme i alla riktningar).
GIF:en nedan visar hur detta ser ut när vi har 3 Staylive-ikoner bredvid varandra, ursprungligen med noll marginaler och noll padding, sedan med p-4 (och noll marginaler) och sedan med p-2 (och noll marginaler) . Vi har applicerat en orange bakgrund på varje ikons "box" för att visa hur denna utfyllnad sker inom denna "box".
När vi lägger till marginaler läggs det till tomt utrymme externt runt kanterna på "boxen" för varje text/bild/ikon.
Vi använder stylingformatet m-# (t.ex. m-2 eller m-4 för att lägga till lika stora marginaler i alla riktningar).
GIF:en nedan visar hur det ser ut när vi har tre Staylive-ikoner bredvid varandra, först med noll marginaler och noll padding, sedan med m-4 (och noll paddin) och sedan med m-2 (och noll padding). Den orangefärgade bakgrunden som vi applicerade på varje ikons "box" appliceras fortfarande här, men eftersom marginaler lägger till tomt utrymme externt täcker ikonerna hela sin ruta och vi ser inte något av bakgrundsfärgen.
Det är ofta användbart att använda både padding och marginaler tillsammans. GIF:en nedan visar hur det ser ut när vi lägger till både p-2 och m-4, så att vi har lite utrymme internt inom varje ikons ruta och lite större externt utrymme mellan var och en av de tre rutorna.
I vissa situationer kanske du vill använda padding och marginaler endast i vissa riktningar, eller ha överlappande effekter av avsnitt/texter/bilder/ikoner. Guiderna nedan visar hur dessa avancerade stylingmetoder kan tillämpas.
Som nämnts ovan använder stylingformatet p-# lika mycket utrymme/avstånd i alla riktningar, men ibland kanske du bara vill lägga till utfyllnad/avstånd på vissa sidor av texten/bilden/ikonen.
För att göra detta kan vi använda stylingformatet px-# för att bara använda utrymme/avstånd horisontellt (både till vänster och höger), eller py-# för att bara använda utrymme/avstånd vertikalt (både upptill och nedtill).
Ännu mer specifikt kan vi använda stylingformaten pt-#, pb-#, pl-# och pr-# för att bara lägga till mer utrymme upptill, nedtill, till vänster respektive till höger.
Samma stylingformat kan användas för att tillämpa marginaler endast på vissa sidor av texten/bilden/ikonen, men med hjälp av mx-#, my-#, mt-#, mb-#, ml-# och mr-#.
Ibland kanske du vill att avsnitt/texter/bilder/ikoner ska överlappa varandra för att få en mer flytande effekt när du rullar ner på en sida.
Vi kan använda stylingformatet -mt-# på det avsnitt/text/bild/ikon som är placerat längre ner på sidan, vilket kommer att tillämpa en negativt värderad toppmarginal. Detta har effekten att dra detta avsnitt/text/bild/ikon uppåt, men utan att ändra positionen för det avsnitt/text/bild/ikon som är placerat ovanför det.
Det kan också vara nödvändigt att redigera z-index för detta avsnitt. Z-indexet definierar i vilken ordning avsnitt/texter/bilder/ikoner visas ”ovanpå” eller ”under” varandra (på samma sätt som ”bring this item to the top” fungerar i Microsoft Powerpoint/Word etc.). Ett z-index på 50 kommer att visas ovanför ett z-index på 40, sedan 30, sedan 20, sedan 10, sedan 0.
GIF:en nedan visar ett exempel på denna effekt. Till att börja med har vi my-20 tillämpad på wrapper styling som standard, men vi vill tillämpa en negativ marginal längst upp så att dessa ikoner kommer att flyta något över botten av hjältebilden, så vi tar bort denna styling och lägger till -mt-20. Men vi vill behålla marginalen längst ner, så vi lägger också till mb-20. Nu ser vi att ikonerna är delvis dolda under hjältebilden, så vi lägger till z-50 och detta ger oss den effekt som vi vill ha.
När du har gjort ändringar i plattformsredigeraren ska du alltid komma ihåg att trycka på ”**Spara**” längst ned till vänster för att spara dina ändringar, då får du en förhandsgranskning till höger.
Om du är nöjd med dina ändringar trycker du på ”**Publicera**” för att göra dem tillgängliga på plattformen. Du kan också trycka på ”**Släng utkast**” för att radera alla dina ändringar efter den senaste publiceringen.
Betydelse
Padding avser utrymmet/avståndet mellan t.ex. en text/bild/ikon och kanterna inom den behållare/box texten/bilden/ikonen finns.
Marginaler avser utrymmet/avståndet som finns utanför denna behållare/box.
Guiden nedan förklarar hur du kan redigera padding och marginaler, vilket gör det möjligt att justera layouten för allt på din plattform.
Grundläggande styling av utfyllnad och marginaler
Observera att vissa element/sektioner på din plattform redan har styling för padding/marginaler, så i så fall bör du redigera den befintliga stylingen i stället för att lägga till ny styling.
Om du vill ha mer information om CMS-styling kan du söka i Tailwind CSS-guiderna som finns tillgängliga på https://tailwindcss.com/docs .
Lika stort utrymme i alla riktningar
När vi lägger till padding läggs det till tomt utrymme vid samtliga kanterna på den "box" inom vilken texten/bilden/ikonen finns.
Vi använder stylingformatet p-# (t.ex. p-2 eller p-4 för att lägga till lika mycket utrymme i alla riktningar).
GIF:en nedan visar hur detta ser ut när vi har 3 Staylive-ikoner bredvid varandra, ursprungligen med noll marginaler och noll padding, sedan med p-4 (och noll marginaler) och sedan med p-2 (och noll marginaler) . Vi har applicerat en orange bakgrund på varje ikons "box" för att visa hur denna utfyllnad sker inom denna "box".
Lika stora marginaler i alla riktningar
När vi lägger till marginaler läggs det till tomt utrymme externt runt kanterna på "boxen" för varje text/bild/ikon.
Vi använder stylingformatet m-# (t.ex. m-2 eller m-4 för att lägga till lika stora marginaler i alla riktningar).
GIF:en nedan visar hur det ser ut när vi har tre Staylive-ikoner bredvid varandra, först med noll marginaler och noll padding, sedan med m-4 (och noll paddin) och sedan med m-2 (och noll padding). Den orangefärgade bakgrunden som vi applicerade på varje ikons "box" appliceras fortfarande här, men eftersom marginaler lägger till tomt utrymme externt täcker ikonerna hela sin ruta och vi ser inte något av bakgrundsfärgen.
Det är ofta användbart att använda både padding och marginaler tillsammans. GIF:en nedan visar hur det ser ut när vi lägger till både p-2 och m-4, så att vi har lite utrymme internt inom varje ikons ruta och lite större externt utrymme mellan var och en av de tre rutorna.
Avancerad styling av padding och marginaler
I vissa situationer kanske du vill använda padding och marginaler endast i vissa riktningar, eller ha överlappande effekter av avsnitt/texter/bilder/ikoner. Guiderna nedan visar hur dessa avancerade stylingmetoder kan tillämpas.
Padding i specifika riktningar
Som nämnts ovan använder stylingformatet p-# lika mycket utrymme/avstånd i alla riktningar, men ibland kanske du bara vill lägga till utfyllnad/avstånd på vissa sidor av texten/bilden/ikonen.
För att göra detta kan vi använda stylingformatet px-# för att bara använda utrymme/avstånd horisontellt (både till vänster och höger), eller py-# för att bara använda utrymme/avstånd vertikalt (både upptill och nedtill).
Ännu mer specifikt kan vi använda stylingformaten pt-#, pb-#, pl-# och pr-# för att bara lägga till mer utrymme upptill, nedtill, till vänster respektive till höger.
Marginaler i specifika riktningar
Samma stylingformat kan användas för att tillämpa marginaler endast på vissa sidor av texten/bilden/ikonen, men med hjälp av mx-#, my-#, mt-#, mb-#, ml-# och mr-#.
Negativa marginaler
Ibland kanske du vill att avsnitt/texter/bilder/ikoner ska överlappa varandra för att få en mer flytande effekt när du rullar ner på en sida.
Vi kan använda stylingformatet -mt-# på det avsnitt/text/bild/ikon som är placerat längre ner på sidan, vilket kommer att tillämpa en negativt värderad toppmarginal. Detta har effekten att dra detta avsnitt/text/bild/ikon uppåt, men utan att ändra positionen för det avsnitt/text/bild/ikon som är placerat ovanför det.
Det kan också vara nödvändigt att redigera z-index för detta avsnitt. Z-indexet definierar i vilken ordning avsnitt/texter/bilder/ikoner visas ”ovanpå” eller ”under” varandra (på samma sätt som ”bring this item to the top” fungerar i Microsoft Powerpoint/Word etc.). Ett z-index på 50 kommer att visas ovanför ett z-index på 40, sedan 30, sedan 20, sedan 10, sedan 0.
GIF:en nedan visar ett exempel på denna effekt. Till att börja med har vi my-20 tillämpad på wrapper styling som standard, men vi vill tillämpa en negativ marginal längst upp så att dessa ikoner kommer att flyta något över botten av hjältebilden, så vi tar bort denna styling och lägger till -mt-20. Men vi vill behålla marginalen längst ner, så vi lägger också till mb-20. Nu ser vi att ikonerna är delvis dolda under hjältebilden, så vi lägger till z-50 och detta ger oss den effekt som vi vill ha.
Spara och publicera
När du har gjort ändringar i plattformsredigeraren ska du alltid komma ihåg att trycka på ”**Spara**” längst ned till vänster för att spara dina ändringar, då får du en förhandsgranskning till höger.
Om du är nöjd med dina ändringar trycker du på ”**Publicera**” för att göra dem tillgängliga på plattformen. Du kan också trycka på ”**Släng utkast**” för att radera alla dina ändringar efter den senaste publiceringen.
Uppdaterad den: 04/11/2024
Tack så mycket!