Home 〉 CSS Tutorials 〉 CSS Padding Explained with Examples | CSS Box Model Guide

CSS Padding Explained with Examples | CSS Box Model Guide !

CSS Padding Explained with Examples | CSS Box Model Guide !

What is padding in CSS, and how does it affect element spacing?

Dive into the concept of padding within the CSS box model. This tutorial explains how to add space inside elements, between the content and the border, using the 'padding' property.

CSS Padding - Complete Guide with Examples and HTML

What Is Padding in CSS?

Padding is the space inside an element, between the content and its border. It pushes the content inward from the edges of the element.

Step-by-Step Examples

Example 1: Padding on All Sides

html code 📝

<!DOCTYPE html>
<html>
<head>
<style>

.box {
padding: 20px;
background-color: #f2f2f2;
border: 1px solid #ccc;
}

</style>
</head>
<body>

<div class="box">
<p>This box has 20px padding on all sides.</p>
</div>

</body>
</html>

output 📌

This box has 20px padding on all sides.

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

This applies 20px of padding on top, right, bottom, and left.

Example 2: Top and Side Padding (2-value shorthand)

html code 📝

<!DOCTYPE html>
<html>
<head>
<style>

.box {
padding: 10px 30px;
background-color: #e0f7fa;
border: 1px solid #0097a7;
}

</style>
</head>
<body>

<div class="box">
<p>Padding: 10px top/bottom, 30px left/right.</p>
</div>

</body>
</html>

output 📌

Padding: 10px top/bottom, 30px left/right.

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

The above example sets vertical (top & bottom) padding to 10px and horizontal (left & right) to 30px.

Example 3: 3-value Padding

html code 📝

<!DOCTYPE html>
<html>
<head>
<style>

.box {
padding: 10px 20px 30px;
background-color: #fff3e0;
border: 1px solid #ff9800;
}

</style>
</head>
<body>

<div class="box">
<p>Top: 10px, Left/Right: 20px, Bottom: 30px</p>
</div>

</body>
</html>

output 📌

Top: 10px, Left/Right: 20px, Bottom: 30px

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

In the above example

  • Top: 10px
  • Left & Right: 20px

Example 4: Four Different Padding Values

html code 📝

<!DOCTYPE html>
<html>
<head>
<style>

.box {
padding: 5px 10px 15px 20px;
background-color: #fce4ec;
border: 1px solid #d81b60;
}

</style>
</head>
<body>

<div class="box">
<p>Top: 5px, Right: 10px, Bottom: 15px, Left: 20px</p>
</div>

</body>
</html>

output 📌

Top: 5px, Right: 10px, Bottom: 15px, Left: 20px

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

This example follows the clockwise rule (top, right, bottom, left).

Example 5: Using Padding with Percent (%)

html code 📝

<!DOCTYPE html>
<html>
<head>
<style>

.container {
width: 400px;
background-color: #ede7f6;
}
.box {
padding: 10%;
background-color: #9575cd;
color: white;
}

</style>
</head>
<body>

<div class="container">
<div class="box">
<p>Padding is 10% of the container's width (400px × 10% = 40px).</p>
</div>
</div>

</body>
</html>

output 📌

Padding is 10% of the container's width (400px × 10% = 40px).

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

The Padding is calculated as a percentage of the parent element's width, not height in the above example.

Example 6: Individual Padding Properties

This box uses separate padding values for each side.

html code 📝

<!DOCTYPE html>
<html>
<head>
<style>

.box {
padding-top: 10px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 25px;
background-color: #e8f5e9;
border: 1px solid #66bb6a;
}

</style>
</head>
<body>

<div class="box">
</div>

</body>
</html>

output 📌

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

This Demonstrates how to give individual padding like padding-top means padding in top side.

Example 7: With Box-Sizing to Control Element Size

html code 📝

<!DOCTYPE html>
<html>
<head>
<style>

* {
box-sizing: border-box;
}
.box {
width: 200px;
padding: 20px;
background-color: #f1f8e9;
border: 2px solid #8bc34a;
}

</style>
</head>
<body>

<div class="box">
<p>Padding is included within the width due to box-sizing: border-box.</p>
</div>

</body>
</html>

output 📌

Padding is included within the width due to box-sizing: border-box.

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Theabove example Demonstrates the total element width stays at 200px, including padding and border.

🏁 Conclusion

Padding helps add space 'inside elements', improving layout and readability. It's a core part of the CSS box model. Use it with individual or shorthand properties depending on your layout needs. Pair with `box-sizing: border-box` for better layout control.

Remember:

  • Use `px`, `%`, or `em` depending on your design needs.
  • Use shorthand for cleaner code.
  • Learn how padding fits with margin and the box model.

Suggested Topics:

Related Topics:

Frequently Asked Questions (FAQs)

What is padding in CSS?

Padding is the space inside an element, between its content and border. It helps create breathing room around the content.

How is padding different from margin in CSS?

Padding adds space inside the element, while margin adds space outside the element, between it and other elements.

Can I use different padding values for each side?

Yes! You can use separate properties like `padding-top`, `padding-right`, `padding-bottom`, and `padding-left`, or use shorthand.

What is the shorthand syntax for padding in CSS?

You can use `padding: top right bottom left;`. For example:

"padding: 10px 20px 15px 5px;"

Can I use percentages in padding?

Yes. When you use `%`, it calculates the padding based on the 'width of the parent element'.

Does padding affect the total size of an element?

By default, yes. But if you set `box-sizing: border-box`, the padding is included inside the total width/height.

Previous Post Next Post