? padding in CSS

The padding property adds space inside an element’s border, between the content and the border. It creates breathing room inside the element.

Syntax

selector {  padding: value;         /* all sides */  padding-top: value;  padding-right: value;  padding-bottom: value;  padding-left: value;}

Values

• Length units: px, em, rem, %, vh, vw, etc.

• Percentage is relative to the width of the containing block.

Shorthand Padding

/* One value: applies to all sides */padding: 20px;/* Two values: top/bottom | left/right */padding: 10px 15px;/* Three values: top | left/right | bottom */padding: 10px 15px 20px;/* Four values: top | right | bottom | left */padding: 10px 15px 20px 25px;

Example

.box {  padding: 15px 30px; /* 15px top/bottom, 30px left/right */  border: 1px solid #ccc;}

Visual Breakdown

+---------------------------+|       padding             ||  +---------------------+  ||  |     content area     |  ||  +---------------------+  |+---------------------------+

Why Use Padding?

• Increase spacing inside elements.

• Improve readability by separating content from borders.

• Prevent content from touching edges.

Want me to show you the difference between padding and margin with examples?