Nearby lessons
10 of 19📦 CSS Padding Properties
📌 What are CSS Padding Properties?
CSS Padding Properties define the spacing between an element's content and its border. Padding improves content readability and layout structure.
You can apply padding to individual sides (top, right, bottom, left) or use the shorthand property to define all at once. Padding does not accept negative values and can be specified in pixels, percentages, etc.
📦 Padding Shorthand (All sides)
The padding property sets all four paddings using a single value.
Code Example
🔄 Individual Paddings
Use padding-top, padding-right, padding-bottom, and padding-left to control padding on each side separately.
Code Example
↕️ Padding - Two Values
The padding property can take two values: first is vertical (top & bottom), second is horizontal (left & right).
Code Example
🧭 Padding - Three Values
With three values: first = top, second = left & right, third = bottom.
Code Example
🧭 Padding - Four Values
Four values apply in clockwise order: top, right, bottom, left.