Beginner-Friendly Topic
Take your time - it's perfectly normal to re-read this topic 2-3 times. Try the interactive code editor below to run code yourself. Use the Q&A section to check your understanding before moving on. You've got this! 🚀
CSS Padding
Padding creates space INSIDE an element - between its content and its border. Unlike margin, padding is filled by the element's background color. Padding is how you make buttons, cards, and containers feel spacious and readable.
Padding Properties
- padding-top, padding-right, padding-bottom, padding-left - Set individual sides
- padding: 16px - All four sides equal
- padding: 12px 24px - Top/bottom 12px, left/right 24px (common for buttons)
- padding: 10px 20px 30px 40px - Top, right, bottom, left (clockwise)
- Padding is always positive - unlike margin, you cannot have negative padding
- Background fills padding - background-color and background-image extend through the padding area
- Padding vs margin - Padding = inside space (clickable area for buttons). Margin = outside space (gap between elements)
Padding in Practice
/* Button padding - the most common use */
.btn {
padding: 12px 24px; /* 12px top/bottom, 24px left/right */
/* Makes the clickable area comfortable */
}
.btn-sm { padding: 6px 12px; }
.btn-lg { padding: 16px 32px; }
/* Card padding */
.card {
padding: 24px; /* Equal space on all sides */
}
.card-body { padding: 16px 20px; }
/* Section padding */
.section {
padding: 60px 20px; /* Vertical breathing room */
}
/* Padding with background */
.highlight {
background: #fff3cd;
padding: 12px 16px; /* Background fills this area */
border-radius: 8px;
}Tip
Use asymmetric padding for buttons: padding: 12px 24px (more horizontal than vertical). This creates a natural, comfortable clickable area. For cards, equal padding on all sides (padding: 24px) creates a clean, uniform feel.
Every element follows the box model - content + padding + border + margin
Common Mistake
Using margin when you need padding (and vice versa). Remember: if you want space INSIDE the element (between content and border), use padding. If you want space BETWEEN two separate elements, use margin. Padding is filled by background-color; margin is always transparent.
Quick Quiz
Key Takeaways
- Padding creates space INSIDE an element - between its content and its border.
- padding-top, padding-right, padding-bottom, padding-left - Set individual sides
- padding: 16px - All four sides equal
- padding: 12px 24px - Top/bottom 12px, left/right 24px (common for buttons)