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 50px, left and right margin value is 100px, and bottom margin value is 150px.
- margin: 50px 100px; – It indicates that top and bottom margin value is 50px, left 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 50px, right padding value is 100px, bottom padding value is 150px, and left padding value is 200px. - padding: 50px 100px 150px;
It indicates that top padding value is 50px, left and right padding value is 100px, and bottom padding value is 150px. - padding: 50px 100px;
It indicates that top and bottom padding value is 50px, left 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!