<div> is display: block by default, so divs stack vertically, each taking a full line. The question asks you to lay 5 in a row without Flexbox, margin, or padding.

The answer: change the display type

.row div {
  display: inline-block;   /* flow horizontally, but keep width/height */
  width: 100px;
  height: 100px;
}

inline-block makes elements flow inline like text, side by side, while still respecting width/height (which pure inline ignores).

The catch the hint is pointing at: whitespace gaps

inline-block elements are treated like words — and whitespace between them in the HTML (newlines, spaces) renders as a real gap, just like the space between words.

<div class="row">
  <div></div>   <!-- the newline + indentation here = a visible gap -->
  <div></div>
</div>

Ways to kill the gap

1. font-size: 0 on the parent, reset it on the children:

``css .row { font-size: 0; } .row div { font-size: 16px; display: inline-block; } ``

1. No whitespace in the HTML — put the divs on one line, or:

``html <div></div><!-- --><div></div> ``

1. Negative margin — but the question disallows margin.

Other approaches (if not restricted)

• display: flex on the parent — the normal modern answer (excluded here).
• display: grid — also excluded by spirit.
• float: left — old-school; works but needs clearing.
• white-space: nowrap on the parent keeps them from wrapping.

Why this question is asked

It tests whether you understand the display property and the inline formatting context — specifically the famous inline-block whitespace quirk. The "without flex/margin/padding" constraint forces you off the easy path to prove you know why inline-block behaves like it does.

Senior framing

The senior answer doesn't just say "inline-block" — it anticipates the whitespace gap before being asked, explains it's because inline-level boxes treat HTML whitespace as text, and gives the font-size: 0 fix. Mentioning that Flexbox exists precisely to avoid these inline-formatting quirks shows you know why the modern tooling won.