How to Use Margin and Padding in CSS

1. Introduction of Margin in CSS
2. Introduction of Padding in CSS

Margin and padding may look similar in CSS, but they are different. This tutorial will introduce margin and padding in CSS. Then we will know the difference between them and learn when to use margin and padding.

Introduction of Margin in CSS

In CSS, the margin is the space between any two adjacent elements. It is the space between the border of the two adjacent elements. The margin of any element does not control the space inside the element. Rather, it is responsible for the space right outside of the element. We use the margin property to specify the margin of all four sides of the element. We write four values in the margin property. The values represent margin-top, margin-right, margin-bottom and margin-left in order. We can illustrate as follow.

element {
margin: 20px 20px 20px 20px;
}

The code above sets the 20px margin of an element from all four sides.

When we use only the three values, the value in the middle represents the margin-left and margin-right properties. If the margin property has only two values, the first value represents the margin at the top and the bottom, and the second represents the margin at the left and the right. A single margin value represents the margin at all four sides.

Now, let’s demonstrate what a margin is. For example, create two div’s with redbox and bluebox as their classes. Give height and width of 200px to each of the classes. Set background-color of the boxes to red and blue. Then, set the margin-bottom property of the redbox, the top box, to 20px.

The example below creates two boxes of red and blue colors. The margin-bottom property provides a space of 20px from the border of the red box in the bottom direction. It means that the blue box will have a distance of 20px from the red box. If we remove the margin-bottom property, the space will get removed, and the two boxes will attach themselves. Note that the texts in both boxes are attached to the border of the boxes with no spaces to the left and the top.

Example Code:

<div class="redbox"> Red Box </div>
<div class="bluebox"> Blue Box </div>

.redbox {
 height:200px;
 width: 200px;
 background-color:red;
 margin-bottom:20px;
}

.bluebox {
 height:200px;
 width: 200px;
 background-color:blue;
 color:white;
}

We can use the CSS margin if we want to change the position of an element in our webpage. Using the margin property, we can shift the element to the left, right, top, and bottom. Another use of margin comes when we need to specify the distance between two nearby elements. We have illustrated it in the example above. We can even use the negative margin value in elements to create an overlapping effect. These are some use cases of CSS margin.

Introduction of Padding in CSS

Padding is the space between the border of an element to the content of the element. It is the space inside an element, and it has no control over the area outside the element. We use the padding property to set the padding of an element. We can use four values, three values, two values, and a single value to represent the padding of an element. The padding representation is similar to the margin representation in terms of the directions. We can illustrate as follow.

margin: 20px 20px 20px 20px;

The code above sets the padding of 20px in all directions.

Now let’s demonstrate the practical usage of CSS padding with an example. We will use the same HTML structure as above here. In CSS, select the div and give height and width of 200px and padding-top of 50px. Select the individual classes and give them the respective value for background-color property.

In the example below, the two boxes are attached, unlike in the margin example above. But, we can see some space above each text in both boxes. This is what padding does. Setting the padding-top property to 20px has added space of 50px from the text to the top of the box.

Example Code:

<div class="redbox"> Red Box </div>
<div class="bluebox"> Blue Box </div>

div{
 height:200px;
 width: 200px;
 padding-top:50px;
}
.redbox {
 background-color:red;
}

.bluebox {
 background-color:blue;
 color:white;
}

We can use CSS padding to specify the space between the content of an element and its border. We can also use padding to increase the size of the element. When we increase the padding value, the space between the content and the border increases. As a result, the element’s size will also increase, keeping the size of the content constant.