width and height — CSS Technical Interview Questions & Answers

Sizing an element's content box.

width and height

  • Sizing an element's content box.
  • width and height is a CSS property: it changes how a selected element looks or sits. You write it inside a rule: .card { width: …; }
  • 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 width and height is about space, draw the box.

Technical Interview Tip: width and height: one rule on .card, then say what changed.

Code Examples for width and height

width and height — working example

.box {
  width: 280px;
  height: 160px;
  max-width: 100%;
  min-height: 120px;
}

.fluid {
  width: 100%;
  height: auto; /* keep image aspect ratio */
}

width and height — width/height size the content box (or border box with border-box); max/min constrain growth.

How to Explain width and height to an Interviewer

What does width and height do?

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