CSS Padding – Syntax, Properties & Examples

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?
• Advanced & Unique Use-Cases of CSS Padding
• Best Practices for 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 to make the text more readable and keeps the layout clean and well-arranged. By using CSS Padding, additional space is added around the elements, which prevents the text and the visuals from looking clustered. Proper padding also improves the overall user experience and accessibility by enhancing the readability and touch target size on mobile devices. According to the design guidelines, such as WCAG, sufficient spacing helps readers process the information and reduces visual strain.

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?

By default, padding is not inherited in CSS, and its initial value is 0 (as per the CSS specification and MDN). However, if you want a child element to use the same padding as its parent, you can explicitly write:

padding: inherit;

This forces the element to copy the parent’s padding values instead of using the default 0. It’s a useful way to maintain consistency in layout styling without repeating the same padding values in multiple elements.

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.

Advanced & Unique Use-Cases of CSS Padding

Some advanced and unique use cases of CSS padding are given below:

1. Logical Padding for RTL and LTR Websites

Traditional padding values like padding-left and padding-right work only for left-to-right (LTR) languages like English. But for right-to-left (RTL) languages like Arabic or Hebrew, these don’t adjust automatically.

Logical padding fixes this by using inline (left/right) and block (top/bottom) directions instead of physical sides. A sample code is given below for your reference:

Example:

Output:

Explanation: The above HTML code is used to create a box with text inside it that supports right-to-left languages like Arabic and applies padding to the top, bottom, left, and right using logical padding properties.

2. Responsive Padding using clamp(), calc(), vw, and rem

Instead of using fixed pixel values, you can create padding that adjusts according to screen size using the following responsive padding techniques.

• vw: viewport width
• rem: scalable unit based on font size
• clamp(min, preferred, max): perfect for responsive design

Example:

Output:

Explanation: The above code is used to show how padding can automatically adjust based on screen size. It uses clamp() and calc() to make the layout more responsive.

3. Percentage-Based Padding for Aspect Ratios

To calculate the padding in percentage, you should use the width of the element and not the height. This can be useful for maintaining aspect ratios like 16:9 videos.

Example:

Output:

Explanation:

The above HTML code is used to make a YouTube video responsive. It uses percentage-based padding to keep a 16:9 aspect ratio on any screen size.

4. Padding and box-sizing: border-box and Why It Matters

Normally, padding is responsible for increasing the size of the element. With box-sizing: border-box, padding is included inside the width, so the layout stays consistent.

Code:

Output:

Explanation: This code shows how using box-sizing: border-box keeps an element’s width fixed by including padding inside the width, unlike the default behavior, where padding increases the total size.

Best Practices for 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. This is the basic difference between padding and margin that helps you structure layouts correctly.

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.

Upskill today by enrolling in our Full Stack Web Development Course and prepare for your next interview by practicing JavaScript Interview Questions prepared by industry experts.

Padding in CSS – FAQs