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.
Interview answer drill
Use this CSS interview question to rehearse a quick answer, common mistake, follow-up, and production pitfall.
What does the padding property do?Frontend interview answer
Interview focus
This CSS interview question tests whether you can explain CSS padding Property Explained: Inner Spacing and Box Model, connect it to production trade-offs, and handle common follow-up questions.
- CSS padding Property Explained: Inner Spacing and Box Model explanation without falling back to memorized docs wording
- Padding and Box Model reasoning, edge cases, and production failure modes
- How you would answer the most likely CSS interview follow-up
Interview quick answer
Full interview 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
Preparing for interviews?
Use this as one explanation rep, then continue with the CSS interview questions cluster or a guided prep path.