Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Padding vs Margin – Vad är skillnaden i WordPress?

I WordPress är padding utrymmet mellan innehållet och kanten inom ett block, medan en marginal är utrymmet mellan två separata block.

Att förstå skillnaden mellan de två är viktigt för alla som vill förfina utseendet och layouten på sin WordPress-webbplats.

På WPBeginner har vi lång erfarenhet av att bygga webbplatser och e-handelsbutiker på WordPress. Detta har gett oss en djupare förståelse för de olika designelement som erbjuds av plattformen, inklusive utfyllnad och marginaler.

I den här artikeln förklarar vi skillnaden mellan padding- och margin-funktionerna och hur du använder dem i WordPress.

Difference between padding and margin in WordPress

Vad är padding i WordPress?

Funktionen padding på din WordPress website används för att skapa utrymme inuti ett block.

You can for example add to space inside a Text block to make its layout more visually appealing and prevent text from appearing too close to the borders of the block.

Padding preview

Du kan också använda padding för att kontrollera hur innehållet flödar på din WordPress blogg. Om du till exempel add to padding högst upp och längst ner i ett Text block, kan du göra det lättare för besökarna att läsa innehållet.

Vad är en marginal i WordPress?

En marginal är ett utrymme runt kanten på ett WordPress-block och dess omgivande element.

Detta kan hjälpa dig att lägga till utrymme mellan två olika block, vilket skapar en renare och mer öppen webbplatslayout.

Margin preview

You kan till exempel add to marginaler högst upp och längst ner i ett Text block så att det förblir synligt även när vyn resizes.

Dessutom kan du också använda marginaler för att add to utrymme mellan Image och Text block för att göra din website visuellt tilltalande och mer tillgänglig för användare.

Vad är skillnaden mellan padding och marginaler i WordPress?

Här är en snabb lista över skillnaderna mellan padding- och marginalfunktionerna i WordPress:

PaddingMargin
Padding means adding space between the content and the border of the block.The margin feature adds space outside the border of the block.
Using padding does not affect the other blocks on your website.Using a margin affects other blocks on your website.
Padding can create a buffer around a block.Margins can create space between two different blocks.

Så här använder du padding i WordPress

Redigering av hela webbplatsen (Site Editor, Redigering av hela webbplatsen) i WordPress har som standard funktionen padding.

Tänk dock på att om du inte använder ett block-baserat theme, så kommer du inte att kunna add to padding till din WordPress site om du inte använder custom CSS.

Som sagt, om du har ett blocktema kan du besöka sidan Utseende ” Editor från WordPress admin sidofält för att starta hela webbplatsredigeraren.

När du väl är där väljer du bara den page template där du vill add padding till dina block från ”Templates” sidebar till vänster. Denna sidebar kommer att visa alla templates för olika pages på din website.

Choose the page where you want to add padding from the left column

När du har gjort det kommer den template som du har valt att öppnas på vyn.

Härifrån klickar du på knappen ”Edit” för att börja customize din page template i hela Site Editor.

Click the Edit icon for full site editor

Välj sedan det block där du vill add to padding. Kom ihåg att detta innebär att du kommer att skapa utrymme mellan innehållet och blockets kant.

Detta öppnar blockets inställningar i blockets panel på höger sida av vyn.

Härifrån måste du rulla ner till sektionen ”Dimensions” och klicka på den treprickiga menyn. Detta öppnar en prompt där du måste selecta alternativet ”Padding”.

Choose the padding option from the Dimensions section

Använd sedan de två sliders för att add to horisontell och vertikal padding till your block.

Tänk på att dessa sliders kommer att add padding till all sidor av blocket.

Padding in full site editor

Men om du bara vill add to padding högst upp, längst ner, till vänster eller höger i blocket kan du också göra det genom att clicka på ikonen ”Padding Options” i padding section.

Detta kommer att öppna en prompt där du kan välja de olika sidorna av blocket som du vill add to padding.

Choose padding options from the prompt

Tänk på att om du vill add to olika paddings till mer än en sida av blocket, måste du välja alternativet ”Custom”.

Detta kommer att lägga till fyra olika sliders på vyn för att lägga till padding till höger, vänster, längst ner eller högst upp i blocket.

Padding for different corners

När du är klar klickar du bara på knappen ”Save” för att spara dina Settings.

Så här använder du marginaler i WordPress

Precis som padding är marginalfunktionen inbyggd i WordPress fullständiga webbplatsredigerare. Tänk dock på att den här funktionen inte kommer att vara tillgänglig om du inte använder ett blocktema.

För att komma igång går du till sidan Utseende ” Editor i WordPress instrumentpanel.

När du väl är där väljer du den page template där du vill lägga till marginaler från colonnen till vänster.

Choose the page where you want to add padding or margin from the left column

Detta öppnar den template för page som du valde på vyn.

Härifrån väljer du bara knappen ”Edit” för att börja customize din template i hela Site Editor.

Click the Edit icon for full site editor

Välj sedan det block som du vill edit och rulla ner till sectionen ”Dimensions” i blockets panel till höger.

Använd sedan de två sliders för att ställa in horisontella och vertikala marginaler för blockets övre, nedre, vänstra och högra hörn lika. Genom att använda den här funktionen skapas utrymme runt det block som du har valt.

Add margin in the full site editor

Om du däremot vill använda flera sliders för att add to olika marginaler runt blocket, clickar du på ikonen ”Margin Options” i sectionen.

Detta öppnar en ny prompt på vyn där du kan välja en sida av blocket för att lägga till en marginal.

Use margin options

Men om du vill add to olika marginaler på flera sidor kan du välja alternativet ”Custom”.

Block-panelen kommer nu att visa olika sliders på vyn som du kan använda för att ställa in olika marginaler runt blocket.

Use margin slider

När du är klar, glöm inte att klicka på knappen ”Save” högst upp för att spara dina settings.

Fler tips för Full Site Editing i WordPress

Förutom att lägga till padding och marginaler i dina block kan du också använda hela Site Editor för att customize hela ditt WordPress-tema.

Du kan till exempel designa alla dina sidmallar, lägga till din egen customize-logotyp, välja varumärkesfärger, ändra layouten, justera storleken på fonten, lägga till bakgrundsbilder och mycket mer.

Du kan också lägga till mönster och olika block på din webbplats för att anpassa den ytterligare. Mer information finns i vår nybörjarguide om hur du anpassar ditt WordPress-tema.

Add patterns to your layouts

Du kan också använda Redigering av hela webbplatsen för att add to en header, navigation menu eller custom CSS till din website.

Dessutom kan du använda globala stilar för att säkerställa enhetlighet på hela webbplatsen. För mer information, se vår guide om hur du anpassar färger på din WordPress-webbplats.

Choose a background color from the Color Picker

Men om du inte gillar att använda hela Site Editor och föredrar mer control över din websites appearance, kan du använda SeedProd för att bygga pages och till och med hela ditt theme.

Det är den bästa landningssidebyggaren på marknaden och levereras med en dra-och-släpp-byggare. Detta gör det superenkelt att skapa ett fantastiskt tema för din webbplats.

För mer details, you can see our tutorial on how to easily create a custom WordPress theme.

Edit theme template

Vi hoppas att den här artikeln hjälpte dig att lära dig skillnaden mellan padding- och margin-funktionerna i WordPress. Du kanske också är intresserad av vår nybörjarguide om hur du ändrar blockhöjd och bredd i WordPress och våra toppval för de bästa Gutenberg-blockpluginsen för WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Avslöjande: Vårt innehåll stöds av våra läsare. Det innebär att om du klickar på några av våra länkar, kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt, och hur du kan stödja oss. Här är vår editoriala process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Den ultimata WordPress-verktygslådan

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som varje professionell användare bör ha!

Reader Interactions

3 kommentarerLämna ett svar

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Jiří Vaněk says

    These are exactly those details that a person doesn’t often remember and then tries to figure out what that slider actually does. Thanks to the mentioned GIFs, it’s beautifully explained what padding and margin specifically do. It’s superb. It’s like a mnemonic aid. What you read, you usually forget, but what you see, you tend to remember much better.

  3. A Owadud Bhuiyan says

    I always just remembered that the margin is from the outside and padding from the inside.

    Also, I kept remembering that margin is an important factor regarding the responsive issue on a website.

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt våra policy för kommentarer, och din e-postadress kommer INTE att publiceras. Vänligen använd INTE nyckelord i namnfältet. Låt oss ha en personlig och meningsfull konversation.