CSS

🎯 What is Padding?

Padding is the space between: Content ↔ Border

It pushes the content inward, giving it breathing room inside the element.

🧩 Simple Definition

CSS

Padding = Inner spacing inside an element

💡 Visual Representation


+----------------------------------+
|            Margin                |
|  +----------------------------+  |
|  |          Border            |  |
|  |  +----------------------+  |  |
|  |  |      Padding         |  |  |
|  |  |  +----------------+  |  |  |
|  |  |  |   Content      |  |  |  |
|  |  |  +----------------+  |  |  |
|  |  +----------------------+  |  |
|  +----------------------------+  |
+----------------------------------+

👉 Padding is the space between the content and the border.

🧠 Basic Usage

CSS

padding: 20px;

This adds 20px of space on all sides:

top
right
bottom
left

🔹 Setting Padding for Each Side

You can control each side individually.

Individual Properties

CSS


padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

Shorthand Property

CSS

padding: 10px 20px 30px 40px;

📘 Order:

top → right → bottom → left

Value Type	Description
length	Fixed units like px, em, rem
%	Percentage of parent element width
initial	Resets padding to default (usually 0)
inherit	Inherits padding from parent element

✅ Example

CSS


.box {
  padding: 20px;
}

% Example

CSS


.box {
  padding: 5%;
}

🧩 Practical Example

HTML


<div style="border: 2px solid black; padding: 20px;">
  This is a box. There is 20px of space between the content and the border.
</div>

⚠️ Padding vs Margin

Feature	Padding	Margin
Location	Inside the element	Outside the element
Affects	Space between content and border	Space between elements
Purpose	Inner spacing	Outer spacing

🧠 In Summary

padding controls inner spacing

It creates space between content and border

It improves readability and UI structure

It can be applied to all sides or individually

It is a key part of the CSS box model

CSS Outline

CSS Margin