CSS Padding

If you are new to web development, one of the basic things that you should know is CSS padding. It plays a very important role in how the content of your website looks and feels. The CSS padding property provides you with the space between the border of the element and its content.

In this blog, you will learn everything about padding in CSS, how it works, and how you can use it effectively in your webpage. So let’s get started!

Table of Contents:

• What is Padding in CSS?
• CSS Padding Properties
• CSS Padding Shorthand Property
  1. CSS Shorthand Property for One Value
  2. CSS Shorthand Property for Two Values
  3. CSS Shorthand Property for Three Values
  4. CSS Shorthand Property for Four Values
• How to Inherit the Padding in CSS from the Parent Element?
• Best Practices for Using CSS Padding
• Conclusion

What is Padding in CSS?

CSS padding is basically the empty space that you add inside a box, between the content and the outer border of that box. You can consider it to be a cushion around your content. When you add padding to your content, it pushes the content away from the edges, so that nothing looks squeezed on your webpage. This helps you to make your text more readable and your layout clean and well-arranged. By using CSS padding, you can provide your content with some extra space so that they don’t get congested and it feels more comfortable to look at it.

In the above image, the green part represents the padding area inside the container of the element. The margin area is present outside the container of the element. The border separates the margin area and the padding area from each other.

The syntax for padding in CSS is given below:

Syntax:

padding: size in px or percentage or inherit;

You can set CSS padding using different types of values:

1. Length values: You can use units like px (pixels), em, or rem for setting a fixed amount of padding. For example, padding: 20px; means that there will be 20 pixels of space inside the element.

2. Percentage (%): Padding can also be used to set a percentage. This percentage is based on the width of the container of the element. For example, the padding: 10% will make the padding result in 10% of the width of the container.

3. Inherit: When you apply inherit, then the value of padding is copied from the parent element. This helps you to have uniform spacing between related items.

An example code to implement CSS padding using HTML and CSS is given below:

Code:

Output:

Explanation:

The above HTML code is used to print two paragraphs: one with padding and the other without padding. The first paragraph consists of 10px padding; therefore, you can see space inside the border. On the other hand, the second paragraph contains 0px padding, so the text is touching the border. This output shows how CSS padding is used to add space inside an element.

Master Web Development Today!

Learn to build stunning websites and powerful web applications with expert-led courses.

Explore Program

CSS Padding Properties

At times, you might feel like adding a different amount of space on each side of an element, like adding more space on top and less on the sides. You can do this by adding CSS padding separately for each side: padding-top, padding-right, padding-bottom, and padding-left. This helps you to get full control over the spacing inside the element.

Given below is an example code so you can understand the properties that are defined above:

Code:

Output:

Explanation:

In the above output, you can see that the padding (green part) in all four directions is different from each other. It was set in this way in the code.

Note: While adding CSS padding, you should use shorthand properties. This will help you save a lot of time while writing the code and make the code more readable.

CSS Padding Shorthand Property

In CSS, padding shorthand is a shortcut way to add space on all four sides of an element: top, bottom, right, and left. Instead of writing each side separately, you have to write just one line using padding, and it will apply to all the sides at the same time. This helps to make your code shorter and easier to read. Given below are 4 cases of applying padding to the targeted element:

1. CSS Shorthand Property for One Value

If the padding property consists of only one value, then it applies padding to all sides of the element. For example, if the value is set to 20px, it applies 20px of padding to all sides equally.

Syntax:

padding: all;

Example:

padding: 20px;

2. CSS Shorthand Property for Two Values

If you use two values in the padding property, the first value will be used to set the space on the top and bottom, and the second value will be used to set the space on the left and right. This is a simple way to set vertical and horizontal padding without writing 4 separate lines.

Syntax:

padding: top&bottom left&right;

Example:

padding: 10px 20px;

3. CSS Shorthand Property for Three Values

If there are three values in the padding property, the values are applied by the browser in a specific order. The first value is used to set the padding at the top of the element, and the second value is used for both left and right padding. The third value is used to set the padding at the bottom. This will help you to specify the spacing of various sides of an element without writing four separate properties.

Syntax

padding: top right&left bottom;

Example:

padding: 10px 15px 20px;

4. CSS Shorthand Property for Four Values

When you give four values to the padding property, each value is used to set the padding for a specific side of the element. The first value is used to set the padding for the top, the second value is for the right, the third value is for the bottom, and the fourth value is for the left. This helps you to control the padding on all four sides in a single line.

Syntax:

padding: top right bottom left;

Example:

padding: 10px 15px 20px 25px;

Given below is an example code that shows the use of a shorthand property.

Code:

Output:

Explanation:

The above code is used to show how you can use CSS padding shorthand properties in 4 ways. Each paragraph consists of different padding to control the spacing between the paragraphs.

How to Inherit the Padding in CSS from the Parent Element?

If you want an element to use the same CSS padding as its parent element, you can write padding: inherit;. This means that the element will copy the padding values automatically from its parent element; therefore, you don’t have to set them again. It can be a useful way to set your layout in a consistent way without repeating the same code.  Give an example code to understand this better:

Code:

Output:

Explanation:

The above HTML code is used to show how you can inherit CSS padding from a parent element. The <div> tag has a padding of 15px, and the <p> tag inside uses padding: inherit;, which means that it will copy the same 15px padding. A black border is also added to the paragraph so you can see the padding working.

Best Practices for Using CSS Padding

1. Try to use the same padding values throughout your design to leave things tidy.

2. Use em or % units if you want your padding to adjust well on different screen sizes.

3. Remember, the padding is the space within the element, whereas the margin is the space outside.

4. Padding should not be excessive, as this could make your contents feel congested.

5. Mix padding with other CSS styles like borders or background colors to improve the look.

Conclusion

Understanding CSS padding is one of the most important things you should learn as a web developer. Padding adds space inside elements, between the content and the border. This little modification is great for better readability. It will make the content on your website less congested, and everything will be easier to read. With the proper use of CSS padding, your website will appear cleaner, more organized, and it will perform better on different screen resolutions. To learn more about CSS, go through our blog and enroll in our Web Development Course.

Padding in CSS – FAQs