yoklainterview sim
ProgressHistory

Frontend Css Layout Interview Questions

75 verified Frontend Css Layout interview questions — solve with answers, learn from explanations, test yourself in a real simulation.

Try the real simulation →

Sample questions

Css LayoutDifficulty 1
In the standard CSS box model, a block element's box is built from four layers, from the inside out. Which ordering is correct?
  • acontent, then margin, then border, then padding
  • bcontent, then padding, then border, then margin✓
  • ccontent, then border, then padding, then margin
  • dpadding, then content, then margin, then border
Explanation:Content is the innermost layer; padding surrounds the content inside the border; the border wraps the padding; and margin is the outermost transparent space between this box and its neighbors. Option (a) swaps margin and padding — margin always sits outside the border, never between content and border.
Css LayoutDifficulty 2
.card {
  width: 300px;
  padding: 20px;
  border: 10px solid black;
  box-sizing: border-box;
}

What is the content-box (inner) width of .card?
  • a300px — width always sets the content area regardless of box-sizing
  • b360px — the width plus both paddings and both borders
  • c260px — the width minus the padding but not the border
  • d240px — the width minus both paddings and both borders✓
Explanation:With box-sizing: border-box, the declared width includes content, padding, and border, so the browser subtracts them to find the content area: 300 − 40 − 20 = 240px. Option (a) describes the default content-box, where width sets only the content and the box would instead grow to 360px total.
Css LayoutDifficulty 2
Compared with the default content-box, what does box-sizing: border-box change about how an element's width is interpreted?
  • awidth now includes content, padding, and border, so adding padding shrinks the content but keeps the total fixed✓
  • bwidth now includes the margin as well, so margins no longer push neighboring elements
  • cwidth starts measuring from the border outward, making the element render larger than declared
  • dwidth still applies only to the content, exactly as before, but padding is silently ignored
Explanation:Under border-box the declared width is the outer width of content + padding + border; padding and border eat into the content area instead of adding to the box, which is why layouts stay predictable. Margin is never part of width under any box-sizing (b) — it always sits outside the box.
Css LayoutDifficulty 1
What is the difference between display: none and visibility: hidden?
  • adisplay: none hides the element but keeps its keyboard focus, while visibility: hidden removes focus
  • bThere is no rendering difference; the two declarations are interchangeable
  • cdisplay: none removes the element from layout entirely, while visibility: hidden hides it but keeps its space✓
  • ddisplay: none only hides the text, while visibility: hidden hides the whole element
Explanation:display: none takes the element out of the flow, so it occupies no space and leaves no gap; visibility: hidden still reserves the element's box, so surrounding content does not move. They are not interchangeable (b) precisely because of this layout difference.
Css LayoutDifficulty 2
Which statement about non-replaced inline elements (such as a <span>) is correct?
  • aThey start on a new line and stretch to fill the full width of their container
  • bAn explicit width and height, plus top/bottom margins, have no effect on their layout✓
  • cThey accept width and height but ignore all padding and border
  • dThey behave exactly like inline-block elements in every respect
Explanation:Inline boxes flow within a line and size to their content, so width/height and vertical margins are ignored. Switching to inline-block (d) is exactly what you do when you need those box dimensions to take effect — the two are not the same.
Css LayoutDifficulty 2
You have several <a> links that should sit side by side on one line, yet each needs a fixed width and vertical padding so it looks like a button. Which display value fits best?
  • ainline-block — the links stay on one line yet respect width and vertical padding✓
  • bblock — this respects width and padding but forces each link onto its own line
  • cinline — this keeps them on one line but ignores the width and vertical padding
  • dtable-cell — the only display type that allows both a width and inline flow
Explanation:inline-block is the classic answer: the box joins the inline flow (so the links sit side by side) yet honors width, height, and vertical padding like a block. block (b) works for the box dimensions but stacks the links vertically, and plain inline (c) ignores width and vertical padding entirely.

By specialization

Angular 450JavaScript 450React 450TypeScript 450Vue 450

By seniority

Frontend JuniorFrontend MidFrontend Senior

Other fields

BackendFullstackDevOps / CloudAI EngineerDatabaseMobileSecurityQA / Test AutomationData EngineerGame DevelopmentML Engineer

Test yourself against the 2925-question Frontend bank.

Start interview