The terms 'margin' and 'padding' in CSS are used extensively to create space around an HTML element. While the margin and padding do the same work (for example, add space around an HTML element), they are very different from each other. These two CSS properties are important as they allow adding or removing space around an element, producing a clean UI look.
What is margin
The margin CSS property is used to create space around HTML elements. It can also be defined as the space between any two nearby HTML elements. Let's see what margin means through an example image.
As you can see, there are spaces around all four sides of the HTML element. These spaces are called 'margins'. You have complete control over the margin property: you can set the amount of space required around the HTML element using the CSS shorthand property margin.
Margins are set using the percentages and lengths in px. You can set the margin to auto and it can have negative values too.
Margin syntax
Now, let's see how you can set the margin of an HTML element. The shorthand syntax of the margin property is shown below:
element {
margin: value;
}Let's study a short example to understand how it works:
<body>
<div class="boxA">Box A</div>
<div class="boxB">Box B</div>
</body>div {
border: 1px solid black;
height: 50px;
}
.boxA {
margin: 10px;
}Here's the result of the code snippets above:
As you can see, the div container with class boxA has some margins on all four sides and it is applied only to the element to which the margin: 10px property is applied. The orange-colored region in the above image is defined as the margin. margin can be set for every side of an element using different CSS properties (margin-top, margin-bottom, etc.) which will be discussed in a later section. Also, remember that the top and bottom margin properties have no effect on the inline elements. You can try it out and play with the code examples above.
Now, let's discuss the use cases of the margin property. Use it when:
1. You need to center an element. If that element has a fixed width, it will be centered horizontally by margin: auto
margin: auto will only work if the block width is set.
2. You need to make some content stand out by putting it separately without other elements touching it.
What is padding
The padding CSS property creates space inside an HTML element limited by the element's boundaries. That means the padding shorthand property is used to add space between the border of the HTML element and the HTML content. Let's see what padding means via the following example:
As you can see, the padding creates a space around an HTML element and within the borders of the HTML element.
Padding syntax
Now, let's see how you can set the padding of an HTML element. The shorthand syntax of the padding property is shown below:
element {
padding: value;
}Here's a short example to understand how the padding property works:
<body>
<div class="boxA">Box A</div>
<div class="boxB">Box B</div>
</body>div {
border: 1px solid black;
height: 50px;
}
.boxA {
padding: 10px;
}Here's the result of the above code snippets:
As you can see, the padding creates a space inside the border of the HTML element, and the container on which the padding: 10px is applied. In other words, the container with the class boxA gets widened from all four sides. The green-colored region shown in the output image defines the padding of the Box A container. Like the margin property, padding can be set for every side of an element using different CSS properties (padding-top, padding-bottom, etc.) which will be discussed in a later section. Also, remember that the top and bottom padding properties have no effect on the inline elements. You can try it out yourself.
You should use the padding property in the following cases:
1. You want to increase the size of the element. padding will increase the size to accommodate the gap.
2. You need the element to have a background in the produced gap.
3. You need some space around the content, i.e. inside the border of the element.
Different syntaxes
There are other ways in which you can set the margin or padding of an HTML element. Till now, you've studied how to set the margin and padding using shorthand syntax, margin and padding respectively for all four sides. Also, remember that you can set margin and padding in any CSS unit (px, em, %).
It's not always necessary to set margin and padding to every side. It is also possible to state one, two, three, or all four values at once. Let's look at the other ways to define these properties:
One-value syntax:
The single value provided to margin and padding is set to all four sides of an HTML element.
element {
margin: 10px; /* margin-top = margin-right = margin-bottom = margin-left = 10px */
padding: 10px; /* padding-top = padding-right = padding-bottom = padding-left = 10px */
}Two-value syntax:
When two values are given to margin or padding, the first value is set as the top and bottom margin or padding and the second value is set as the left and right margin or padding.
/* top&bottom left&right */
element {
margin: 10px 20px;
padding: 10px 20px;
}Three-value syntax:
When three values are given to margin or padding, the first value is set as top margin or padding, the second value is set as right and left, and the third value is set as the bottom margin or padding.
/* top right&left bottom */
element {
margin: 10px 20px 30px;
padding: 10px 20px 30px;
}Four-value syntax:
When four values are given to margin or padding, the first, second, third, and fourth values are set as margin-top, margin-right, margin-bottom, and margin-left respectively.
To remember the values and how they are set, always use the clockwise rule. Start from the top and then go right.
/* top right bottom left */
element {
margin: 10px 20px 30px 40px;
padding: 10px 20px 30px 40px;
}
Note that if needed, you can also use negative values for margins (margin-left: -5%), but not for padding.
Conclusion
As you can imagine, making a readable and well-designed web page without using margins and padding is virtually impossible, so knowing how to work with them is truly important. You've studied how you can set the spaces outside as well as inside an HTML element using the margin and padding CSS properties. Now you also know how to use these properties if you want to set different values on all four sides or any sides of the element.