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.

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.

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.

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.

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

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.

2. Increasing Padding in 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.

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.

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.

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.

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 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’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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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

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.

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.

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

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.

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.

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.

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.

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.