CSS Padding

Padding creates space inside an element. It increases the distance between the content and the border.

Main Padding Properties

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

div{

    padding:20px;

}

CSS provides individual properties to control padding on each side of an element.

.box{

    padding-top:20px;

    padding-right:30px;

    padding-bottom:20px;

    padding-left:30px;

}

Individual padding properties provide precise control over the spacing inside an element.

.box{

    padding-top:25px;

    padding-bottom:25px;

}

The padding shorthand property allows you to define all four padding values in one line.

One Value

padding:20px;

Applies 20px padding to all four sides.

Two Values

padding:20px 40px;

Top & Bottom = 20px, Left & Right = 40px.

Three Values

padding:20px 30px 40px;

Top = 20px, Left & Right = 30px, Bottom = 40px.

Four Values

padding:10px 20px 30px 40px;

Top = 10px
Right = 20px
Bottom = 30px
Left = 40px

Padding increases the total size of an element because it is added inside the border.

.box{

    width:300px;

    padding:20px;

    border:2px solid black;

}

Example

Padding and margin both create spacing, but they are used in different parts of an element.

.box{

    margin:20px;

    padding:20px;

    border:2px solid black;

}

The background color of an element extends through its padding area, making the element appear larger.

.box{

    background-color:lightblue;

    padding:30px;

    border:2px solid blue;

}

The entire padding area will have the same background color as the content area.

Responsive websites adjust padding for different screen sizes to improve readability and user experience.

.container{

    padding:20px;

}

Responsive Example

@media(max-width:768px){

    .container{

        padding:10px;

    }

}

Example 1: Button

button{

    padding:10px 20px;

}

Example 2: Card

.card{

    padding:25px;

}

Example 3: Navigation Links

nav a{

    padding:12px 18px;

}

Example 4: Form Input

input{

    padding:10px;

}

In the CSS Box Model, padding is located between the content and the border.

.box{

    width:300px;

    padding:20px;

    border:3px solid #000;

    margin:30px;

}

Proper use of padding makes web pages clean, readable, and user-friendly.

• Use consistent padding throughout your website.
• Provide enough internal spacing for comfortable reading.
• Use padding instead of extra spaces or  .
• Keep button padding large enough for easy clicking.
• Use responsive padding for mobile devices.
• Prefer CSS classes instead of inline styles.
• Use the shorthand property whenever possible.
• Combine padding with box-sizing:border-box; for predictable layouts.

❌ Incorrect

.card{

    padding:80px;

}

✔ Better

.card{

    padding:20px;

}

CSS padding properties are fully supported by all modern web browsers.

1. What is CSS padding?
2. What is the difference between padding and margin?
3. How do you apply padding on all four sides?
4. Explain the padding shorthand property.
5. Does background color extend into the padding area?
6. How does padding affect an element's size?
7. What is the role of box-sizing:border-box;?
8. How do you set different padding values for each side?
9. Why is responsive padding important?
10. Where is padding located in the CSS Box Model?

In this lesson, you learned:

• ✔ Introduction to CSS Padding.
• ✔ Padding Properties.
• ✔ Individual Padding.
• ✔ Padding Shorthand Property.
• ✔ Padding and Element Size.
• ✔ Padding vs Margin.
• ✔ Padding with Background Color.
• ✔ Responsive Padding.
• ✔ Practical Padding Examples.
• ✔ Box Model and Padding.
• ✔ Best Practices and Common Mistakes.