CSS Padding And Its Usage

1. What is CSS Padding?

CSS padding creates a space around the content of an element but within the boundary of the element. Unlike CSS margins, the padding creates space within the boundary of the element. Whereas, CSS margin property creates space outside the boundary of the element. Basically, we achieve this function of padding with the help of the CSS padding property. Check the below example:

1.1. CSS Padding for Individual Sides

Previously, in the CSS margins tutorial, we learned to create a margin on all sides of an element separately. Fortunately, we can achieve similar functionality with padding property and style our content beautifully. We can do so by following properties:

1. padding-top
2. padding-right
3. padding-bottom
4. padding-left

Furthermore, we can assign the values of padding property by following four ways:

1. length: We assign a value of padding in px, em, cm, etc
2. %: Padding is specified in % of the width of the element
3. inherit: Inherits the padding value from the parent element

.para{
padding-left: 50px;
padding-top: 0px;
padding-right:100px;
padding-bottom: 20px;
}

2. What is CSS Padding Short-Hand Property?

Surprisingly, padding of all four sides of an element can be set with a single CSS property. We can do this by padding property to assign the values of padding-top, padding-right, padding-bottom, and padding-left respectively. Actually, this short-hand Padding property helps us minimize the code length. Check the following examples to understand it completely:

2.1. CSS Padding Property With "4" Values

.p{
padding: 0px 100px 20px 50px;
}

2.2. CSS Padding Property With "3" Values

Also, if there are three values assigned to padding short-hand property, values will be assigned as follows: padding: 100px 20px 50px;

1. padding-top: 100px;
2. padding-right: 20px;
3. padding-left: 20px;
4. padding-bottom: 50px;

.p1{
padding: 100px 20px 50px;
}

2.3. CSS Padding Property With "2" Values

Moreover, if padding short-hand property has 2 values, values will be assigned as follows: padding:20px 50px;

1. padding-top: 20px;
2. padding-right: 50px;
3. padding-left: 50px;
4. padding-bottom: 20px;

.p1{
padding: 20px 50px;
}

2.4. CSS Padding Property With "1" Value

Furthermore, if padding property is set with one value, all sides will have same padding value as follows: padding: 50px;

1. padding-top: 50px;
2. padding-right: 50px;
3. padding-bottom: 50px;
4. padding-left: 50px;

.p1{
padding: 50px;
}

3. What is CSS Padding Order?

The padding order is essential to understand the padding property completely. From the above discussion and examples, it is concluded that the padding order is as follows:

3.1. Padding With "4" Values

padding: 10px 20px 30px 40px;

3.2. Padding With "3" Values

padding: 20px 30px 40px;

3.3. Padding With "2" Values

padding: 30px 40px;

3.4. Padding With "1" Value

padding: 10px

4. How To Define CSS Padding with Element Width?

Sometimes, after specifying the width of an element with width property, when padding is added to that element the rendered result is undesirable or not feasible. Actually, the padding is added to the width of that element increasing the width of that element on the screen. Look at this example:

div1{
padding: 20px;
width: 200px;
}
div2{
padding: 0;
width: 200px;
}

5. What is CSS Box Sizing Property?

In order to strictly keep the width of the elements according to the specified value, a box model can be applied. For this purpose, the box-sizing property comes in handy. See the following example to understand clearly.

div1{
padding: 20px;
width: 200px;
box-sizing: border-box;
}
div2{
padding: 0;
width: 200px;
}