padding — CSS Technical Interview Questions & Answers

Space between an element's border and its content.

padding

  • Space between an element's border and its content.
  • padding is a CSS property: it changes how a selected element looks or sits. You write it inside a rule: .card { padding: …; }
  • Change one value, refresh, say what moved: colour, space, size, or stacking. That is how you learn properties — not by memorising the spec.
  • Trap: putting it on the wrong selector (parent vs child). Trap: px only on a phone page — learn rem/%/flex too when it is layout.
  • Box model reminder: width/height, padding, border, margin are different. If padding is about space, draw the box.

Technical Interview Tip: padding: one rule on .card, then say what changed.

Code Examples for padding

padding — working example

.button {
  padding: 0.65rem 1.25rem; /* top/bottom | left/right */
}

.card {
  padding-block: 1rem;
  padding-inline: 1.25rem;
}

.icon-btn {
  padding: 0.5rem; /* all sides */
}

padding is space inside the border, between edge and content; it increases clickable area.

How to Explain padding to an Interviewer

What does padding do?

A CSS property that changes look/layout Write it in a rule and refresh