Description & Usage

The padding property creates space inside an element between its text/content and its outer border line.

Unlike margin, padding inherits the background color and background image of the element container.

Increasing padding is essential for touch targets, buttons, and readable card containers, giving content room to breathe.

Property Specifications

Property FeatureSpecification
CategoryBox Model
Initial Value0
InheritedNo (not inherited)
Applies ToAll elements except table-row-group, table-header-group, etc.
Box Model Explorer
box-sizing:
margin: 20px
border: 4px
padding: 20px
Content (180px × 90px)
Rendered Element Size:180px × 90px
Fixed total width of 180px (Content auto-shrinks inside border)

Syntax

padding: 10px | 10px 20px | 10px 20px 30px 40px;

Property Values

ValueDescription
1rem1rem padding on top, right, bottom, left.
0.5rem 1rem0.5rem top/bottom, 1rem left/right.

Code Examples

Button Click Area Padding
.btn { padding: 0.75rem 1.5rem; border-radius: 6px; }
Increases comfortable touch/click area inside button border.