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:

Example

This paragraph has a padding of 100px on all sides;
This paragraph has a padding of 100px only on the left side.

Try in CodeLab

Tutorial Contents:

  1. Intro To CSS Padding
  2. The Padding Short-Hand Property
  3. Padding Order
  4. Padding with Element Width
  5. Box Sizing Property in CSS

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

Note:

This padding property cannot have negative(-ve) values.

Example

This paragraph element has padding values as padding-left: 50px;, padding-top: 0px;, padding-right:100px; and padding-bottom: 20px;

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

Try in CodeLab

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

Example

This paragraph element has padding values as padding-top: 0px;, padding-right:100px;, padding-bottom: 20px; and padding-left: 50px;

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

Try in CodeLab

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;

Example

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

Try in CodeLab

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;

Example

.p1{
padding: 20px 50px;
}

Try in CodeLab

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;

Example

.p1{
padding: 50px;
}

Try in CodeLab

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;

10px : padding-top
20px : padding-right
30px : padding-bottom
40px : padding-left

3.2. Padding With “3” Values

padding: 20px 30px 40px;

20px : padding-top
30px : padding-right
30px : padding-left
40px : padding-right

3.3. Padding With “2” Values

padding: 30px 40px;

30px : padding-top
30px : padding-bottom
40px : padding-right
40px: padding-left

3.4. Padding With “1” Value

padding: 10px

padding-top =  padding-right = padding-bottom = padding-left

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:

Example

This div element has width of 200px with 20px padding.
This div element also has a 200px width but no padding specified.

As you can see from the above two examples that both div elements have the same width of 200px, but one element has no padding whereas, the other element has 20px padding. Resultantly, the padding adds to the width of the element width. Try this in codelab to understand more clearly.

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

Try in CodeLab

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.

Example

This div element has width of 200px with 20px padding along with box-sizing(box model) applied.
This div element also has a 200px width but no padding specified.

Now, it is obvious from the above illustration that the box-sizing applied along with padding contained the content of the element to the width specified. Hence the width of both the elements remained the same. Understand clearly in the CodeLab.

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

Try in CodeLab

Give Us Your Feedback
OR
If You Need Any Help!
Contact Us