Table of contents

Introduction:

Approach:

2.1.

Padding and Element width:

2.2.

2.3.

Padding - shorthand property:

Difference between margin and padding in CSS:

Frequently asked questions:

Key Takeaways:

Last Updated: Mar 27, 2024

CSS Padding

Author Pradipta Choudhury

Introduction:

Padding is a property in CSS which allows you to specify how much space should appear between the content of the element and its border. The value of that property is most often specified in pixels(although it is also possible to use percentages or ems). If a percentage is used, the padding is a percentage of the browser window(or of the containing box if it is within another box).

Difficult right!!, don’t worry we will have a detailed discussion on this topic. Come, let’s start.

Also see, Difference Between CSS and SCSS

Approach:

The padding properties in CSS can further be specified into the following types:

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

All the padding properties contains three things:

Length: It is generally defined in terms of px, pt, cm, etc.
Percentage(%): It defines padding in terms of the percentage of the containing element.
Inherit: Padding is always inherited from the parent element.

Note: negative values cannot be used.

Now, let’s have a look through some of the examples of how we can define and use this padding concept. Is it really a magic wand!!

As you can see, the second paragraph here is much easier to read because there exists space between the border and text of the box. The box is also wider because it has padding. Different values can be specified using a different side of the box:

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

Code:

HTML:

Hello Coders!!

CSS:

p{
width:200px;
border:3px solid black;
padding-top: 50px;
padding-right: 5px;
padding-bottom: 30px;
padding-left: 70px;
}

Padding and Element width:

The example given above contains a field ‘width’. The ‘width’ property defines the width of an element’s content area. The content area refers to the portion inside padding, margin, and border of the element.

So, if the element has a defined width, then the padding of that element will be added to the element’s total width. This sometimes results in an undesirable ending.

We can use the box-sizing property to keep the width fixed at specific pixels, no matter the amount of padding. This helps to maintain the actual width; if you increase the padding, the available content space will decrease.

HTML:

The 'width' property defines the width of an element's content
area. The content area refers to the portion inside padding,
Margin and border of the element.


this div is 300 px wide

CSS:

p{
width: 300px;
padding: 25px;
box-sizing: border-box;
background-color: lightblue;
}
p.div{
width: 300px;
background-color: yellow;
}

Output:

Padding - shorthand property:

As the name suggests, this feature in padding helps the work and reduces the code size. It acts as a shortcut key for padding. You can use a shorthand(where the values are in clockwise order: top, right, bottom, left.

HTML:

Hello Coders!!

CSS:

p{
width:200px;
border: 3px solid black;
padding: 25px 50px 75px 100px;
}

Output:

In the example given above, top padding is 25px, right padding is 50px, bottom padding is 75px and left padding is 100px.

If the padding has three values:

For the example given below, top padding is 25px, right and left padding is 50px and bottom padding is 75px.

HTML:

Hello Coders!!

CSS:

p{
width:200px;
border: 3px solid black;
padding: 25px 50px 75px ;
}

Output:

If the padding has two values:

Here, the top and bottom padding is 25px; right and left padding is 50px.

HTML:

Hello Coders!!

CSS:

p{
width:200px;
border: 3px solid black;
padding: 25px 50px ;
}

Output:

If the padding has one value:

For one value, 25 padding will be applied for all four fields, top, right, bottom, and left.

HTML:

Hello Coders!!

CSS:

p{
width:200px;
border: 3px solid black;
padding: 25px ;
}

Output:

Difference between margin and padding in CSS:

In CSS, margin refers to the space around an element’s border and its content. In other words, the margin is a property in CSS that controls the space outside an element, and padding controls the space inside an element.

Let’s have a look at the margin first.

The element illustrated above has a margin of 10px. The picture depicts that there is a 10px space between its element and its adjacent page elements. If we put multiple of these elements together, we will see how margins help the elements to breathe, creating a space between them.

On another side, padding comes inside the border of an element.

The example shown above has a padding of 10px on its left and right sides and 15px on its bottom and topsides. For creating the gap, the padding either grows the element size or shrinks the content inside.

Frequently asked questions:

For which purpose, the padding property is used?

The padding property is used to specify the space between an element and its border.

How to color padding in CSS?

To add color in CSS padding, use the background-clip property and box-shadow property.

Brief the difference between margin and padding.

The padding creates extra space within the element, whereas; margin creates extra space around an element.

Is it possible to add padding to a border in CSS?

No, it is not possible to add padding to a border in CSS. All margin, padding, and border are different parts of an element. We can’t provide margin a border.

Key Takeaways:

In this article, we have discussed CSS padding, how to approach various constituents of padding, and finally looked at the differences between margin and padding.

But this is just the theoretical knowledge at your hand. Without practical knowledge, learning is incomplete. So, keep practicing, and if you think this article helped you, do share it with your friends.

All the best for your future endeavors.

Keep learning

~ Pradipta Choudhury