CSS Padding

Gunjeev Singh
Last Updated: May 13, 2022

Introduction

The Cascading Style Sheets(CSS) is a styling language that we use to style text, images, and graphics that we place using the HyperText Markup Language(HTML). CSS is a highly used language among web developer communities. CSS Padding is a significant CSS tag. 
CSS Padding properties are used to add space around the content of an element inside defined endlines. The powerful CSS language gives you complete control and flexibility over controlling the padding on an element. We can change and specify padding individually on all sides, i.e., left, right, top and bottom.

This blog is written with basic CSS knowledge being a prerequisite. You can start your CSS journey with our free course if you are entirely new to front-end development.

Understanding the Difference between Margin and Padding

There is a lot of confusion among web designers and front-end developers between CSS margin and CSS padding tags. The margin tag allows us to manipulate the space around an element’s borders, while the CSS padding tag allows us to control the area around an element’s contents. In simple terms, the margin property helps us manage space outside an element, while the padding tag helps us manage the space inside an element’s borders. 

 

Diagrammatically, we can differentiate between margin and padding tags as:

Diagrammatic Representation of the difference between Margin and Padding effects.

 

In the above diagram, the black box is the element on which the tags are being applied. The green space around the black borders is the margin, while the blue area inside the borders is the CSS padding. The yellow area is the content inside an element. The element in discussion could be anything like a <div> tag, and the content could be an image placed inside it. 

Application of the CSS Padding Tag

As mentioned above, CSS gives us the ability to manage the padding on all sides of an element’s contents. In this section, we will see how to manage the padding on respective sides. We will also look into how we can work the spacing on all sides simultaneously. 

Individual Sides

We can use the padding-side tag to apply padding to the respective sides of an element’s content. It has four variants for left, right, bottom, and top. Its application is as follows.

 

General Syntax:

.element-class{
    padding-side: value unit;
}


Four specific variants:

.element-class{
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 25px;
    padding-bottom: 25px;
}

 

The padding-left tag will apply a padding of 25px on the left side of the content inside an element; the padding-right, padding-top, padding-bottom tags will do so for the right, top, and bottom sides, respectively.

 

Diagrammatic Representation of padding tags applied individually as shown above 

Padding on Multiple Sides Together

To simplify and shorten the length of our code, we can apply padding to multiple sides in one go. This can be achieved in numerous ways depending on our requirements. How the interpreter understands the syntax depends on the number of arguments given in the tag.

Four Arguments

If the CSS padding tag is given four arguments, each argument adjusts the padding at one specific side of the element’s contents. The syntax explanation is as follows:

 

.element-class {
padding: 25px 35px 45px 55px;
}

 

According to this syntax the element’s content has a padding of:

  1. There is a padding of 25px at the top
  2. There is a padding of 35px on the right side.
  3. There is a padding of 45px at the bottom.
  4. There is a padding of 55px on the left side.

 

 

Diagrammatic Representation of above code showing padding

Three Arguments

If the CSS padding tag is given three arguments, the first argument adjusts the padding at the top of the element’s contents, the second at the sides, and the third at the bottom. The syntax explanation is as follows:

 

.element-class{
padding: 25px 35px 55px;
}

 

According to this syntax the element’s content has a padding of:

  1. A top padding of 25px
  2. Left and right padding of 35px
  3. A bottom padding of 55px

Diagrammatic Representation of above code showing padding

Two Arguments

If the CSS padding tag is specified using two arguments, the first one determines the padding at the top and bottom, while the second determines the padding at the left and right sides of the element’s content. The syntax explanation is as follows:

 

.element-class{
padding: 50px 100px;
}

 

According to this syntax the element’s content has a padding of:

  1. The element has a padding of 50px on the top and bottom
  2. The element has a padding of 100px on the left and right

Diagrammatic Representation of above code showing padding

 

One Argument

If the CSS padding tag is given just one value, that value is the padding of all our sides.

The syntax for the same would be:

.element-class{
    padding: 50px;
}

 

According to this syntax the element’s content has a padding of 50px on all four sides of its contents.

Diagrammatic Representation of above code showing padding

 

Padding Property with Width Property

If the width property is applied to an element, the CSS padding property adds up to the element’s total width. This happens because the width property specifies the width of the element’s content area. 

 

For example, if an element has the following styles:

.element-class{
    width: 200ox;
    padding: 25px;
}

 

This would mean that the element would have a resulting width of 250px (200 from the specified width, 25 on both left and right sides from the padding).

Frequently Asked Questions

  1. What are the values that we can give to the CSS padding tag?
    We can specify the length in all CSS recognized units, a percentage, or use the inherit tag.
  2. Are negative padding values allowed?
    Unlike margins, the padding tag does not allow negative padding.
  3. How can we use the width and padding tags without undesirable results?
    We can achieve this using the “box-sizing” tag available in CSS.

Key Takeaways

We have learned that we can apply padding to specific sides and use shorthand tags to apply padding to all sides at once. We also learned that the difference between margin and padding is that margin adds space outside an element’s borders while padding adds space inside its borders, around its content. 

 

With this, now you have a deep understanding of the padding tag in CSS. To learn more about CSS, you can start here. If you are preparing for your next front-end interview, check out the blog 25 CSS Interview Questions For Beginners in 2021.

Was this article helpful ?
1 upvote