CSS Padding

Padding is the inner spacing of an element the space between the content and its border. It’s one of the most fundamental CSS properties for layout and design.

Key Difference

• Margin → adds space outside the border (between elements).
• Padding → adds space inside the border (between content and border).

Specific Padding Properties

You can control each side individually:

Code Block Loading...

Padding Shorthand

The padding shorthand lets you set multiple sides at once. The order is Top → Right → Bottom → Left. (Clockwise)

• 1 value: all sides equal

Code Block Loading...

2 values: top & bottom, left & right

Code Block Loading...

3 values: top, left & right, bottom

Code Block Loading...

4 values: top, right, bottom, left

Code Block Loading...

Accepted Units

Padding accepts any valid CSS length unit:

• px → absolute pixels
• em → relative to font size of the element
• rem → relative to root font size
• % → relative to parent width/height

Example:

Code Block Loading...

Interactive Playground

Key Takeaways

• Padding adds inner spacing between content and border.
• Use specific properties (padding-top, etc.) for precision.
• Use shorthand (padding: ...) for convenience.
• Padding accepts multiple units (px, em, rem, %).
• Experiment interactively to understand how spacing affects layout.