Padding controls the space inside an element, between its content and border. It increases the clickable/visual area without pushing neighboring elements away. Covers: css, padding, box model, layout, spacing.
What does the padding property do?
Preparing for interviews?
Use guided tracks for structured prep, then practice company-specific question sets when you want targeted interview coverage.
Quick Answer
Answer
Overview
Padding is the internal space of a box, sitting between the content area (text, images, etc.) and the border. Increasing padding makes the element look larger because the background color and border expand outward to include that extra space.
Property | Purpose | Example |
|---|---|---|
padding-top | Space above the content | padding-top: 16px; |
padding-right | Space to the content’s right | padding-right: 12px; |
padding-bottom | Space below the content | padding-bottom: 16px; |
padding-left | Space to the content’s left | padding-left: 12px; |
padding | Shorthand for all sides | padding: 16px 12px; |
Shorthand Orders
- Two values:
padding: vertical horizontal; - Three values:
padding: top horizontal bottom; - Four values:
padding: top right bottom left;
Example: Button with Comfortable Click Area
CSS
.btn {
background: #0ea5e9;
color: white;
padding: 12px 18px; /* top/bottom, left/right */
border: none;
border-radius: 8px;
}
The button’s text gains extra room, increasing touch target size and improving usability.
Box-Sizing Interaction
- With
box-sizing: content-box;(default), padding adds to the declared width/height. - With
box-sizing: border-box;, padding is included inside the declared width/height, making sizing easier.
Responsive Tip
Use relative units like em or rem for padding to scale with typography.
Practical notes
Watch for edge case behavior, common pitfalls, and trade-offs between clarity and performance. Mention accessibility and testing considerations when the concept affects UI output or event timing.
Still so complicated?
Imagine your element as a framed photo: padding is the mat inside the frame that keeps the picture from touching the frame’s edges.
Summary
- Padding adds inner space inside the element’s border.
- It affects the element’s perceived size and background area.
- Works with box-sizing to determine how widths are calculated.
- Great for improving readability and tap-target sizes.
Similar questions
Guides