display — CSS Technical Interview Questions & Answers

block, inline, inline-block, flex, grid and none.

display

  • block, inline, inline-block, flex, grid and none.
  • display is a CSS property: it changes how a selected element looks or sits. You write it inside a rule: .card { display: …; }
  • 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 display is about space, draw the box.

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

Code Examples for display

display — working example

.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.row { display: flex; }
.grid { display: grid; }
.gone { display: none; }

display chooses the layout mode for a box: block/inline/flex/grid or none to remove it.

How to Explain display to an Interviewer

What does display do?

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