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

How to Change Margins in WordPress (Beginner’s Guide)

Changing margins in WordPress is a simple way to improve your site’s design and user experience. Margins create space between elements, making your content more readable and visually appealing.

As a general best practice, we always use plenty of margins and spacing in our website designs. We’ve noticed that it has a positive impact on how users engage with our web pages and content.

In this beginner’s guide, we’ll show you how to add and adjust margins in WordPress. You’ll learn different methods for changing margins in various areas of your WordPress website.

Add or change margins in WordPress

What are Margins in WordPress and Web Design?

Margins are the space added around a web page or other elements inside a web page.

Think of a typical web page as an empty piece of paper. Margins are the white or blank space around the edges of the paper.

Margins around a page

The purpose of using margins is to ensure that elements inside a web page don’t look squished together.

Similarly, margins can be used around different elements inside the page layout.

For instance, you can change margins around images so they are not too close to the text or add a margin to leave space between your content area and the sidebar.

In this article, we’re going to cover a lot of information. Click the links below to jump to any section you’d like.

What is the Difference Between Margin and Padding?

Margin and padding are both used to add white space in web design. However, they are used very differently.

Margins add empty space outside an element, and padding adds empty space inside it.

Margin vs padding diagram

Margins are used to add space outside an element. They allow you to ensure there is plenty of space between elements on a web page.

Now, let’s take a look at some examples of when to use margins.

1. Adding margins to increase space between an image and text in an article.

Adding margin between an image and surrounding text.

2. Adjusting margins to add space between sections, like the header and content area.

Increasing margins around container elements

Padding, however, is used to add cushion space between content and the edges of a box or element.

Here are a few examples of when you might want to use extra padding.

1. Adjusting padding to increase cushion space in your call-to-action buttons.

Padding to increase empty space inside a call to action button

2. Increasing Padding in a Text Column

Padding inside a text column

Both padding and margins are widely used in web design.

Using empty spaces adds breathing room to any design, which makes it more user-friendly and elegant.

For more details, see our tutorial on the difference between padding and margins in WordPress.

Why You May Need to Add or Change Margins in WordPress?

Margins are a crucial aspect of web design. They make your website look pleasant and easy to use.

We thoroughly run A/B tests on all our websites to understand how users interact with a design. Time and again, the results show that adding margins has a big effect on conversions.

When you create a cleaner, more organized design, users are more likely to stay on the site longer and complete desired actions.

WordPress themes handle the design aspect of your WordPress website. Most of them already do an excellent job of setting CSS rules to ensure plenty of white space using margins across your theme’s layout.

Margins used in a typical website layout

That said, you may occasionally need to add margins to adjust things.

For instance, you might not like the margin around your navigation menus or want to add more margin around your call-to-action buttons.

Similarly, you may sometimes feel that items are too close to each other or too far apart.

In that case, you will need to change margins in WordPress by yourself.

How to Add Margins in WordPress?

There are plenty of ways to add margins in WordPress.

Depending on where you want to add margin and the options available in your WordPress theme, you’ll need to choose a method that works for you.

Let’s start with the default built-in options in WordPress itself, as they are the easiest for beginners.

Adding Margins in WordPress Using the Full Site Editor

If you use a block-based theme with full site editor support, you can use the built-in site editor to change margins anywhere on your WordPress website.

First, you need to go to Appearance » Editor to launch the site editor.

Launch site editor

Once inside the site editor, click to choose a template from the left column or click anywhere on the preview window.

Next, click on the area or element where you want to change margins. In the right column, you will see the option to adjust margins under the ‘Style’ tab.

Margins in site editor

As you adjust the margins, the editor will highlight the margin area.

You can also choose to add margins to the top, bottom, right, or left side.

Note: The margin option may not be available for all blocks in the site editor. If you cannot see the margin option for an element, try an alternative method below.

Adding Margins in the Block Editor

If you are working on a blog post or a page, you will use the block editor.

The block editor in WordPress allows you to add and change margins for various blocks.

Simply click on the block where you want to add/adjust margins. Under the block settings, switch to the ‘Style’ tab and scroll down to the ‘Dimensions’ or ‘Margins’ option.

Adding margins in block editor

Note: The margin option may not be available for all blocks in the content editor. If you cannot see the margin option for an element, try an alternative method below.

Adding Margins in WordPress Using SeedProd

SeedProd is the best WordPress page builder plugin on the market. It allows you to create custom pages for your website easily. You can even use it to create a custom WordPress theme from scratch.

SeedProd

SeedProd’s intuitive drag-and-drop page builder allows you to adjust margins for any element inside the editor easily.

First, you need to install and activate the SeedProd plugin. For more details, see our tutorial on how to install a WordPress plugin.

Next, you need to visit SeedProd » Landing Pages and then click on the ‘Add New Landing Page’ button.

Add new landing page

After that, you will be asked to choose a template for your page.

SeedProd comes with dozens of ready-made templates that you can use as a starting point, or you can start with a blank template.

Choose template

Click to choose your template, and then provide a name for your landing page.

This will launch SeedProd’s page builder.

You’ll see a live preview of your page on the right side. And elements you can add to your page in the left column.

SeedProd page builder

You can point and click on any item on the page to edit it.

Clicking on an element will select it, and you’ll see its options in the left column. From here, switch to the ‘Advanced’ tab and click the ‘Spacing’ option.

Adding margins in SeedProd

You can change margins and padding for the selected element from here.

Once you finish editing your page, don’t forget to click the ‘Save’ and ‘Publish’ button in the top right corner.

SeedProd save and publish

After that, you can visit your website to see the changes in action.

Change Margins Using Thrive Architect

Thrive Architect is one of the best WordPress page builder tools that lets you use a drag-and-drop interface to design WordPress pages.

It comes with over 300+ templates you can use as a starting point. Plus, you can also use it to edit your WordPress posts and pages, borrowing the layout and style of your existing WordPress theme.

Thrive Architect

To install Thrive Architect, you’ll first need to log into your account on the Thrive Themes website.

From there, you need to download and install the Thrive Product Manager plugin. For more details, see our tutorial on how to install a WordPress plugin.

Download and install Thrive Product Manager

Upon activation, you need to visit the Thrive Product Manager page.

Click the ‘Log into my account’ button to connect WordPress to your Thrive Themes account.

Log into your Thrive Themes account

Once connected, you’ll see the list of available Thrive Themes products under your account.

Go ahead and click on the ‘Install Product’ checkbox under Thrive Architect, and then click on the ‘Install selected products’ button at the bottom.

Install Thrive Architect

Thrive Product Manager will now install the Thrive Architect plugin for you.

After that, you can edit or create a new WordPress post or page and click on the ‘Edit with Thrive Architect’ or ‘Launch Thrive Architect’ button.

Launch Thrive Architect

Thrive Architect will ask you to choose a template if it is a new page.

You can use your theme template to create a ‘Normal Page’ or a ‘Pre-built Landing Page’ template.

Choose templating option

If you choose a ‘Pre-built Landing Page’ option, then the plugin will show you a bunch of templates to choose from.

Simply click to select the one that resembles what you want to create.

Choosing template in Thrive Architect

Whether it is a normal page (using your theme’s styles) or a landing page, Thrive Architect’s page builder would have the same features.

You’ll see a live preview of your page with a toolbar on the right and a settings panel to the left.

Thrive Architect interface

You can point on click on an element to select it. Or click on the add [+] button in the toolbar to add a new element.

Once you click to select and edit an element, its settings will appear in the left column.

From here, click the ‘Layout & Position’ tab to change the margins and padding.

Adjust margins and padding

You’ll see a visual representation of margin and padding.

Take your mouse over to any side of the margin and drag the handle to increase or decrease the margin.

drag to increase or decrease margins

You can repeat the process to change margins on any of the four sides.

Once you are done, don’t forget to click on the Save Work button and then select Save and Exit to Post Editor option.

Publish or update WordPress post or page

You can now click on the ‘Publish’ or ‘Save’ button to save your WordPress post or page.

Changing Margins in WordPress Using CSS Code

This method requires you to add CSS code to your WordPress theme. You’ll also need a very basic understanding of HTML and CSS.

However, this method gives you more flexibility as you can manually choose the area where you want to add or adjust the margins.

Adding and Changing Margins Using Custom CSS in WordPress Theme

WordPress allows you to save custom CSS in your WordPress theme options. However, depending on your WordPress theme, there are multiple ways to do that.

Before you add or change margins using CSS, you may need to find out which element you need to target with your CSS code.

For instance, if you want to change margins around the body of the page, then you can use the following code:

body { 
margin:50px; 
}

The easiest way to find which element to target is by using the Inspect tool in your browser.

Open your website in a new browser tab and take the mouse over to the element that you want to change margins around. After that, right click and select ‘Inspect’ from the browser menu.

Using inspect tool

This will split your browser screen, and you will see the HTML code and CSS behind the page.

You can move your mouse over the code, and your browser will highlight the area affected by it.

Target element

In the code, you can see the HTML element or CSS class you need to target with your custom CSS.

You can even try your margins here to preview how it will look.

Trying margins in the Inspect tool

However, these changes are not saved in your theme and will disappear when you reload or close the browser tab.

Let’s go through different ways you can save this custom CSS in WordPress.

Using Custom CSS to Change Margins in Site Editor

If you are using a block theme with full site editor support. Then, here is how you can add custom CSS to your theme.

First, go to the Appearance » Editor page to launch the site editor and then switch to the ‘Styles’ panel.

Additional CSS option in site editor

At the bottom of the ‘Styles’ panel, click on the ‘Additional CSS’ tab.

This will bring up a text editor where you can add your custom CSS code. Your CSS code will immediately apply, and you will be able to see the changes appear on screen.

CSS margin preview

Once you are happy with the changes, don’t forget to click on the ‘Save’ button to store your changes.

Adding Margins with CSS in Theme Customizer

If you are using a classic theme (without site editor support), then you can save your Custom CSS in the theme customizer.

Go to the Appearance » Customize page to launch the theme customizer.

Launch WordPress theme customizer

The customizer will show different options depending on your WordPress theme.

You need to click on the Additional CSS tab to expand it.

Additional CSS in Theme Customizer

The tab will slide to show you a simple box where you can add your custom CSS.

As soon as you add a valid CSS rule, you will be able to see it applied on your website’s live preview pane.

Adding custom CSS in theme customizer

Once you’re happy with the changes, click on the ‘Publish’ button to store your changes.

Change Margins with Custom CSS Code Using WPCode

The easiest way to add Custom CSS code in WordPress is by using the WPCode plugin.

It is the best WordPress code snippets plugin that allows you to add any CSS/HTML/PHP/JavaScript code to your WordPress website without breaking it.

WPCode - Best WordPress Code Snippets Plugin

The advantage of using WPCode is that you won’t lose your CSS changes when switching your WordPress theme.

Note: There is also a free version of WPCode that you can use.

The first thing you need to do is install and activate the WPCode plugin. For more details, see our tutorial on how to install a WordPress plugin.

Upon activation, go to the Code Snippets » + Add New page.

Take the mouse over to the ‘Add Your Custom Code (New Snippet)’ option in the code snippets library, and click the ‘Use snippet’ button.

Use snippet

Next, at the top of the page, add a title for your custom CSS snippet. This can be anything that helps you identify the code.

After that, write down or paste your custom CSS into the ‘Code Preview’ box and set the ‘Code Type’ by choosing the ‘CSS Snippet’ option from the dropdown menu.

Adding custom CSS in WPCode

For instance, if you want to add or change the margins around the entire web page body, then you can use the following CSS code:

body { 
margin:50px;
}

Next, scroll down to the ‘Insertion’ section and select the ‘Auto-Insert’ method to execute the code across your entire WordPress site.

If you only want to execute the code on certain pages or posts, you can choose the ‘Shortcode’ method.

Choose an insertion method

Now, you need to go back to the top of the page and toggle the switch to ‘Active’.

Finally, click on the ‘Save Snippet’ button to store your changes.

Save and activate CSS

You can now visit your website to see your custom CSS in action.

We hope this article helped you learn how to add or change margins in WordPress. You may also want to learn how to put images side by side in WordPress or how to add underline and justify text buttons in WordPresss.

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

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.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

15 CommentsLeave a Reply

  1. Syed Balkhi

    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. Suman Sourabh

    Having a good amount of margin is very crucial for a good UI. I have used Elementor to play with margins and paddings on the blocks of my WordPress site.

  3. David Lim

    Many people neglect to use the right amount of padding and margin, even though this is as important for user experience as whitespace.

  4. Mrteesurez

    Although, I used WPcode before when it was WordPress header and footer.

    If I use WPcode to add a particular code. Is changing a theme maybe for troubleshooting or any other things does not lost the code ??

    • WPBeginner Support

      Correct, using the plugin WPCode would mean that even if you change the theme the code would still be active.

      Admin

      • Mrteesurez

        Whaooo.
        This is good.
        WPcode has been useful even before it is rebranded.
        Thanks.

  5. Jiří Vaněk

    I would like to ask one question about this topic. Is there a simple solution to have different borders for the desktop version and another for the mobile version for responsivity?

    • WPBeginner Support

      You could use WPCode to load the CSS on mobile :)

      Admin

      • Jiří Vaněk

        Sure, so create two snippets and embed one for the desktop version and one for mobile. Okay

      • Mrteesurez

        You can also use Additional CSS on WP customizers. You can just write the css rule there for both Mobile and desktop and set their respective margins using CSS media query.

        • Jiří Vaněk

          You’re right. In the end I did exactly as you write. I set the CSS according to the display sizes. So now I have a separate CSS set for the desktop version and a separate CSS for the mobile version. Although it was difficult for me and I had to have AI help me, but now it works exactly according to my ideas and exactly as you describe Mr. Mrteesurez.

        • Mrteesurez

          You are welcome, Jirí.
          Using CSS media query is easy but one can find it difficult if not familiar with CSS before but using AI will make it easier to get the code snippet and paste.
          Glad that it worked.

  6. Jodie Osborn

    Thanks for sharing all the different options. I needed the reminder that I’ll lose my custom CSS when I change my theme! Given I have WPCode, I’ll copy my code to a central place before I deactivate the theme.

    • WPBeginner Support

      Glad we could share a way to keep the code :)

      Admin

  7. Konrad

    Exploring various methods, especially with SeedProd and Thrive Architect, provides a tailored approach to design. Loving your beginners guides :)

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.