Margin v/s Padding
During the designing of user interfaces, sometimes there is confusion occurs between padding and margin. They are used to provide extra space or a gap. Both margin and padding targets the four sides of an element and can also work without the border property, but they differ in many ways.
The main difference between the padding and margin is:
- Padding provides the space between the border and the content of an element.
- Margin provides the space between the border and outer elements.
So, when we require the space between the elements, then it is better to use margin, and when we need the space between the inner element and the parent box, then go for padding.
The basic differences between margin and padding are tabulated as follows:
| Margin | Padding |
|---|---|
| Margin is said to be the outer space of an element, i.e., the margin is the space outside of the element’s border. | Padding is said to be the inner space of an element, i.e., the padding is the space inside of the element’s border. |
| We can set the margin to auto. | We cannot set the padding to auto. |
| It can be negative or any float number. | It does not allow negative values. |
| Styling of an element such as background color does not affect the margin. | Padding is affected by the styling of an element, such as background color. |
We can see the following image to clear the difference between the margin and padding. In this image, the margin indicates the area outside the border and the padding indicates the area inside the border.
Let’s discuss the margin and padding separately.
Margin
CSS margin property defines the space around the elements. It is completely transparent and doesn’t have any background color. It clears an area around the element.
We can independently change the top, bottom, left, and right margin by using separate properties that are margin-top, margin-bottom, margin-left, and margin-right. We can also change all properties at once by using the shorthand margin property.
There are four ways of specifying the shorthand margin property that are as follows:
- margin: 50px 100px 150px 200px;
It signifies that top margin value is 50px, right margin value is 100px, bottom margin value is 150px, and left margin value is 200px. - margin: 50px 100px 150px;
It signifies that top margin value is 50px, left and right margin value is 100px, and bottom margin value is 150px. - margin: 50px 100px;
It signifies 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.
The example of the shorthand margin property is given as follows:
Example
Output
In the following output, we can see a scrollbar on the screen. It is because the value of margin-bottom is 150px.
Padding
Unlike the margin property, the CSS padding property defines the space between the element content and the element border.
CSS padding is affected by background colors. It clears an area around the content.
We can independently change the top, bottom, left, and right padding by using separate properties that are padding-top, padding-bottom, padding-left, and padding-right. We can also change all properties at once by using the shorthand padding property.
There are four ways of specifying the shorthand padding property that are as follows:
- padding: 50px 100px 150px 200px;
It signifies 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 signifies that top padding value is 50px, left and right padding value is 100px, and bottom padding value is 150px. - padding: 50px 100px;
It signifies that top and bottom padding value is 50px, left and right padding value is 100px. - padding: 50px;
It sets the equal value of top, right, bottom, and left padding.
Example
In this example, we are using the shorthand property padding to specify the space between the content and the border.
Output
