How to Change Margins in WordPress

In this helpful guide, we want to give you a detailed, easy-to-follow tutorial on how to change the spaces around things on your WordPress website. It doesn’t matter if you’re new to WordPress or have some experience; this guide is meant to help everyone. Our aim is to assist you in making your website look just the way you want it by explaining how to adjust these spaces step by step.

What is the Margin in WordPress?

Before we get into how to change margins in WordPress, let’s understand what margins are. Margins are like the empty space around an element, like a paragraph or an image, on your website. They create a gap between the element and the things around it. When you change margins, you’re basically adjusting how much space there is between stuff on your website. This helps you arrange things like paragraphs, images, and headings exactly how you want them to look.

1. WordPress Customizer Method

1. Access the WordPress Dashboard
Open your web browser and navigate to your WordPress website’s admin panel.
This is typically done by typing the website’s URL followed by “/wp-admin” in the address bar (e.g., “www.yourwebsite.com/wp-admin“).
Log in with your administrator credentials.  

2. Navigate to the Customizer
Once logged in, you will be taken to the WordPress dashboard. On the left-hand side, you will see a menu with various options.
Hover your mouse pointer over “Appearance.”
This will reveal a submenu.
Click on “Customize” in the submenu.
This will open the WordPress Customizer.  

3. Locate Additional CSS Option (if available)
Not all WordPress themes have an “Additional CSS” option in the Customizer. This option is typically available in modern themes that support custom CSS modifications.
If your theme provides this feature, you’ll find it in the Customizer menu. Click on “Additional CSS” or “Custom CSS” to access the CSS editor.  

4. Add Custom CSS Code
In the CSS editor, you’ll find a text area where you can enter your custom CSS code. Here’s an example with explanations:

/* This is a CSS comment - it won't affect your styles but can be used for notes */   
/* Select the element you want to adjust margins for (e.g., paragraphs) */ 
p {     
   /* Adjust the top margin (space above the element) as needed */     
   margin-top: 10px;       
   /* Adjust the bottom margin (space below the element) as needed */     
   margin-bottom: 10px; 
  }   

In the code above:

/* … */: Anything enclosed in these symbols is a comment and won’t affect your styles; it’s for your reference.
 
p: This is a CSS selector targeting all paragraph elements. You can change it to target specific elements like headings, images, or divs by using their corresponding CSS selectors.

margin-top and margin-bottom: These are CSS properties that control the top and bottom margins of the selected element.
10px: is the value you can adjust to change the margin size. You can use different units like pixels (px), ems (em), or percentages (%) based on your design needs.

5. Preview Your Changes: Before saving your CSS changes, it’s a good practice to preview them to see how they affect your website’s appearance. Look for a “Preview” or “Live Preview” button within the Customizer and click it. This will show your site with the applied CSS changes.  

6. Save Your Changes: If you are satisfied with the preview and want to apply the changes to your live website, click the “Publish” or “Save” button in the Customizer. This will save your custom CSS and make it active on your site.

2. Alternative Method (Using a Custom CSS Plugin)

If your theme doesn’t provide an “Additional CSS” option or if you prefer to use a dedicated plugin for custom CSS, you can do so by following these steps:

• From your WordPress dashboard, go to “Plugins” in the left-hand menu.
• Click “Add New.”
• In the search bar, type the name of a custom CSS plugin, like “Simple Custom CSS and JS” or “Customizer CSS.”
• Install and activate the plugin.
• Once activated, look for the plugin in your dashboard menu, usually under “Appearance” or “Settings.” Access the plugin settings, where you can add your custom CSS code.

img { 
     /* Adjust the top margin (space above the element) as needed */     
     margin-top: 10px;       
     /* Adjust the bottom margin (space below the element) as needed */     
     margin-bottom: 10px; 
    }  

You can add the above code to change margin for image tag:

3. Editing Theme Files (Advanced Users)

For advanced users who are comfortable with coding and want more control, you can directly edit the theme’s CSS file. Please exercise caution when doing this to avoid unintended consequences:

• a. From the WordPress dashboard, go to “Appearance” > “Theme Editor.”
• b. On the right side, you’ll see a list of theme files. Select the stylesheet you want to edit; it’s often named “style.css.”
• c. Make your margin adjustments directly within the CSS file.

body {     
      /* Adjust the top margin (space above the element) as needed */     
      margin-top: 10px;       
      /* Adjust the bottom margin (space below the element) as needed */     
      margin-bottom: 10px; 
     }

The above code will add a 10px margin to the top and bottom of your HTML body. Save the file when you’re done.

Always remember to back up your website before making substantial changes, especially when editing theme files directly. This precaution allows you to revert to a previous state if any issues arise during the customization process.