Margin vs Padding: How They Differ & How to Use Them in Your Store

September 2, 2021
by
Sean Flannigan

Margin vs Padding: How They Differ & How to Use Them in Your Store

September 2, 2021
by
Sean Flannigan
Get the latest straight to your inbox
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Share on:

Creating a really amazing online store comes down to a ton of little things—all the ones and zeros that determine the functionality, structure, and look of each page.

There is a sliding scale of coding know-how that goes into the various aspects of building and running a site—from those who can’t distinguish code from Greek but can hold their own in the dashboard to those that can mess around with HTML and CSS to tweak some key visuals to those full-stack gurus that push the all-important changes that make the world go round.

Once upon a time, understanding code was essential for building a site.

These days, with so many low code and no code tools out there, it’s much easier to create beautiful stores without the help of developers. 

While you aren’t directly writing the code, you are still changing all the ones and zeros to make it all happen. Look how powerful you are!

Now, you just need to understand core concepts to make these meaningful changes to your store pages. Like margin and padding, for instance. 

These CSS styling concepts share some similarities but how they change the look of your page elements is very different.

Let’s start by describing how they differ from each other.

What is the difference between margin and padding?

From the center out, each page element consists of content, padding, a border, and margin. As you can see, a border separates padding and margin.

While both margin and padding describe a measurement of space from the element’s border, margin is the invisible external space and padding is the visible internal space. 

Two countries, one border.

css element padding border margin content
Say hello to your element

Each is important for creating an easily readable store page. To further distinguish between the two, let’s define them separately.

What is padding?

Padding is the space within an element between the content and the element’s border. 

So, if your element is a button, your padding is what makes sure the content—‘Start building for free’ in the very contextual CTA below—isn’t tightly hugged by the borders of said button.

#cta-visual-pb#<cta-title>Speaking of padding, have you heard of Shogun Page Builder?<cta-title>It's simple to edit padding and margin with a sharp visual page editor.Start building for free

If there were no padding, that button would look positively awkward. 

With padding on each side of the content, the text floats happily in the middle of the button, inviting you to click it and learn more about building your own amazing store.

button without padding
button with padding
There is a clear winner between these two buttons

When you increase the size of your padding, you are increasing the size of the block within the border. Essentially, content size (like the amount of text and its font size) plus padding equals the total size of the button.

illustration of padding in css element
This is padding

What is margin?

On the other side of the border, margin refers to the space surrounding an element. 

It decides where that element will sit in space and in relation to other elements around it (as will the other elements’ margins).

So, for the CTA example from before, if there were no margins around the button element (and the text element above it), then the text block would crowd in on the border of the button. 

This would not look good.

So, you add margin to the button element and you add margin to the text div above it. The amount of margin you use will increase the size of the container within which everything is couched. 

Since margin is transparent, you can’t see the borders of this container. But, the effect of your changes will be obvious.

illustration of margin in css element
This is margin

Bonus: Negative margin

Just as you are able to push elements away from each other by setting margins, you can also pull an element over another with negative margin. 

So, instead of 20px of margin at the bottom of a certain element, you could do -20px and let the succeeding element encroach upon its northern neighbor. There are reasons to do this, which we will cover briefly below.

When to use margin vs padding

While margin and padding have similar special powers on your store pages, they do very different things.

As we mentioned above, padding will change the amount of space between your element’s border and the content within that border. 

So, you want to use padding to give the text of your button or div some breathing room from the border. This makes for easier readability but also, it just looks better. 

It will also make your visible element larger.

You use margin to keep other elements from colliding with your visible element (remember, margin is transparent). To keep your button from crowding your subtitle text or vice versa, give one or both a bit of margin to drive them apart. 

This creates more whitespace on your pages, helping to create a better user experience for your shoppers.

Sometimes, though, you may want an element to trespass upon another element’s space. That’s negative margin.

When you want a certain element to overlap another, this is the moment that you’ll want to go negative with your margin. 

To make this happen, you’ll want to apply the negative margin to the element you want to be overlapped. The succeeding element will then climb over that element.

It can create an artistic visual for parts of your store, if used correctly.

example of negative margin on shogun page builder
So artsy with my negative margin

Finally, you can make your border implied (no line), you can increase its size to be a force to be reckoned with (a very thick line), or you can make it a dashed or dotted line (if that’s your thing). 

Certain elements work well with a defined border while others (like buttons) only need the addition of a border-radius to round the corners and soften that CTA.

Say hello to the CSS Box Model

To get a fuller picture of the space within which you are working, let’s take a look at the CSS Box Model. 

As you can see, the entire container is a multi-layered affair in service of the content in the middle. It’s like a crosscut of a candy bar if you like sweet analogies. 

The content is the nougat center, the padding is the nutty caramel, the border is the chocolate shell, and the margin is the empty space between the candy bar and the wrapper.

OK, I’m getting hungry now.

Visualizing this can make the whole thing much easier to understand. Analogizing it may only serve to make your mouth water.

css box model representation
The CSS Box Model

Editing margin and padding in CSS

To edit margins and padding for your page elements, go into your stylesheet and find the element class you want to change. It will look like this:

 .nice-looking-button {

margin: auto;

padding: 10px 25px;

  border-radius: 4px;

background-color: #1a212a;

font-size: 16px;

line-height: 160%;

font-weight: 600;

}

Margin and padding are determined for all four sides of an element from the top going clockwise. For example, padding measurements can look like this in CSS:

padding-top: 10px;

padding-right: 25px;

padding-bottom: 10px;

padding-left: 25px;

A simpler and shorter way to do this is to list it out in the same order (top right bottom left) in a single property:

padding: 10px 25px 10px 25px;

And, to shorten it even further if you have the same measurements for top and bottom and left and right is to merely list two measurements, one indicating top/bottom and the other indicating right/left:

padding: 10px 25px;

Finally, if all measurements are the same, just include the one:

padding: 10px;

These are usually measured in px, em, or %. 

The difference between these measurements is that px is a fixed value while em and % are conditional based on the changing size of the content (think mobile responsiveness). 

Margin can also be set to auto (as in the example above), which will center an element horizontally within its container and effectively zero out the top and bottom margins.

Editing margin and padding in Shogun Page Builder

If you’re using Page Builder to create your store pages, you are in luck. 

It’s super simple to play around with padding and margins without having to mess about in the code.

To top it off, you can see the changes on your edit page as you make them. So you can play around endlessly and publish your page when you’ve perfected it.

In the Page Builder edit page, simply click on an element and you’ll see a menu along the right side of your screen. Click the Styles tab at the top and scroll to Margins or Padding to make your changes.

shogun page builder margin padding styles editor

For each property, you can change whether you want it in px, em, or %. For margins, you can also set it to auto

Finally, to edit each unit individually, you have to break the link between the top and bottom as well as the left and right. This is as simple as clicking the little chainlink icon at the top of each section.

choose unit of measurement for margin shogun page builder
Choose your unit of measurement
unlink margin properties in shogun page builder
Unlinking properties

To show you how easy it is to change these CSS properties, I’ll give you a quick example. Here are two elements without margins:

They crowd against each other and make the section look bad. To fix this in Shogun, I can just go to the first element and give it some margin on the bottom. 

shogun page builder no margin between elements
Not great
shogun page builder text element bottom margin
Much better

And, voila. It looks so much better and these two sections aren’t all up in each other’s space.

To learn more about how to use margins and padding in Shogun Page Builder, check out our simple guide (it has GIFs!).

Margins and padding have an effect on how your page looks on various devices, which is why you can easily switch between screen sizes in the editor to see how elements respond.

screen size chooser shogun page builder

In this article on mobile responsiveness, we touch on the use of “auto” margins for responsively centering elements and the use of percentages over px for side margins and padding to create flexible spacing.

Time to customize those pages

Now that you’ve got an idea of what these CSS powerhouses can do, go ahead and use them to make your store look super cool.

You can take to CSS or just do it the fun and easy way with Shogun. Your choice!

Whatever way you do it, you can now say you know the difference between padding and margin and have a good idea of when to use them on your store pages. 

#cta-visual-pb#<cta-title>Start customizing your Shopify store today<cta-title>Give your customers the best possible shopping experience by building a powerful, optimized Shopify store that really tells your story.Start now for free

Sean Flannigan

Sean is one of Shogun's tireless content marketers. When he isn't creating exciting ecommerce content, he's probably biking or at the park.