iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

CSS Padding

By · Reviewed & last updated · Part of CSS Tutorial

The padding property adds space inside an element — between the content and the border. The element's background extends through the padding.

Padding vs margin

margin (outside, transparent) content padding (inside, painted) content
Fig 1. Margin is space outside the border. Padding sits between border and content and shows the background.

Shorthand patterns

ShorthandMeans
padding: 16px;16px on all four sides.
padding: 8px 16px;8px top & bottom, 16px left & right.
padding: 8px 16px 24px;Top 8, sides 16, bottom 24.
padding: 8px 12px 16px 20px;Top, right, bottom, left (clockwise).
Note: By default, padding adds to the element's width. Set box-sizing: border-box globally so width: 200px stays 200px no matter how much padding you add.
Tip: Padding never collapses. Reach for it (not margin) when you want predictable, reliable spacing inside a card or button.

Example

Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>

<h1>CSS Padding</h1>
<div class="box">Edit the CSS on the left, then click Run &raquo;</div>

</body>
</html>
Try it Yourself »

Exercise

Add 12px vertical and 20px horizontal padding in shorthand.

.btn { padding: 12px ; }

Test yourself

Q1. Padding sits between which two layers?
Q2. Does the element's background show through the padding area?
Q3. With default box-sizing, an element has `width: 200px` and `padding: 20px`. Its rendered width is…

Discussion

Loading…