Padding vs. Margin: What’s the Difference?

Posted By: Mark List
Date Posted: 11/07/2022

Padding and margin are two properties often used to control the space around elements in a document. They both have similar roles, but they are not interchangeable. Knowing the difference between them is essential to using them appropriately and effectively in your designs.

Reducing excess space around the individual elements of a design can be challenging. The best tools for this job are margin and padding because, as it turns out, there is a subtle distinction between these two properties that can make all the difference in how you use them.

 

The main distinction between padding and margin is as follows:

  • Padding is the space between an element’s border and its content.
  • Margin is the space between the border and the outer elements.

So, when we need space between elements, we should use margin, and when we need space between the inner element and the parent box, we should use padding.

Margin

  • The margin is defined as an element’s outer space, i.e. the space outside of the element’s border.
  • The margin can be set to auto.
  • It could be negative or any other float number.
  • The margin is unaffected by the styling of an element, such as background colour.

Padding

  • Padding is defined as the inner space of an element, i.e. the space inside the element’s border.
  • Unable to be set to auto
  • Does not allow negative values
  • Affected by the styling of an element, such as background colour

The following image illustrates the difference between margin and padding. The margin in this image represents the area outside the border, while the padding represents the area inside the border.

Let’s talk about margins and padding separately.

Margin’s Explained

The CSS margin property defines the space between elements. It has no background colour and is completely transparent. It frees up space around the element.

We can change the top, bottom, left, and right margins independently by using the margin-top, margin-bottom, margin-left, and margin-right properties. Using the shorthand margin property, we can also change all properties at once.

The shorthand margin property can be specified in four different ways:

  • margin: 50px 100px 150px 200px; – It indicates that the top margin is 50px, the right margin is 100px, the bottom margin is 150px, and the left margin is 200px.
  • margin: 50px 100px 150px; – It indicates that top margin value is 50pxleft and right margin value is 100px, and bottom margin value is 150px.
  • margin: 50px 100px; – It indicates that top and bottom margin value is 50pxleft and right margin value is 100px.
  • margin: 50px; – It sets the equal value of top, right, bottom, and left margin.

Example

<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: orange;
font-size: 20px;
border: 3px solid green;
}
p.margin {
margin: 50px 100px 150px 200px;
}
</style>
</head>
<body>
<p>Welcome to Hosting Australia. </p>
<p class = “margin”>This paragraph is displayed with specified margin.<br>
margin: 50px 100px 150px 200px;
</p>
</body>
</html>

Padding Explained

The CSS padding property, as opposed to the margin property, defines the space between the element content and the element border.

Background colours have an impact on CSS padding. It creates a space around the content.

We can change the top, bottom, left, and right padding independently by using the padding-top, padding-bottom, padding-left, and padding-right properties. Using the shorthand padding property, we can also change all properties at once.

The shorthand padding property can be specified in four different ways:

  • padding: 50px 100px 150px 200px;
    It indicates that top padding value is 50pxright padding value is 100pxbottom padding value is 150px, and left padding value is 200px.
  • padding: 50px 100px 150px;
    It indicates that top padding value is 50pxleft and right padding value is 100px, and bottom padding value is 150px.
  • padding: 50px 100px;
    It indicates that top and bottom padding value is 50pxleft and right padding value is 100px.

Example

<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: orange;
font-size: 20px;
border: 3px solid green;
}
p.padding {
padding: 100px 100px 150px 50px;
}
</style>
</head>
<body>
<p>Welcome to Hosting Australia</p>
<p class = “padding”>This paragraph is displayed with specified padding.<br>
<b>padding: 100px 100px 150px 50px; </b>
</p>
</body>
</html>

Conclusion

CSS gives you fine-grained control over many attributes on an HTML/CSS page. There is almost always a CSS attribute for changing something on an HTML page. You’re ready to tackle the world of web development now that you’ve learned more about margin vs padding in CSS and HTML. If you are still unsure, please contact one of Hosting Australis’ development team members. Please do not hesitate to contact us!

If you need help ...

As always if you need extra support regarding the content in this article our team at Hosting Australia have a range of development and security services that can help your website perform better and protect it from attack ...

Don't risk your valuable business asset.
Get in contact with us to talk about security, backups, speed optimisations and more.

WordPress Website Design

Hosting Australia has a team of expert WordPress Designers, all based in Australia and ready to assist you with any task. From a ground up new site build, updating security or plugins, or just changing some minor details - we can assist with all aspects on your site.

Hit the button below to find our more and get in contact with our design team today.