Questions
13 of 29
1What is the box model in HTML?
2Can you explain the components of the Box Model?
3What’s the difference between margin, border, padding, and content?
4How does padding affect the size of an element?
5How does margin differ from padding?
6What happens when you set negative margins?
7Does padding accept negative values? Why or why not?
8How can you visualize the box model in browser dev tools?
9What is the default box-sizing value for HTML elements?
10What does box-sizing: border-box do?
11Compare box-sizing: content-box and border-box.
12How can you make two boxes align perfectly side by side with consistent spacing?
13How do margin collapsing rules work in CSS?
14Give an example of when margin collapsing might cause layout issues.
15How can you prevent margin collapsing between parent and child elements?
16What is the difference between inline, inline-block, and block elements in terms of the box model?
17Do replaced elements (like <img>, <input>) follow the same box model rules?
18How do width and height interact with padding and border in the box model?
19Why might a layout break when switching from content-box to border-box?
20How would you fix an element that overflows its container due to box model miscalculations?
21How do you use the calc() function to compensate for padding or border widths?
22How does the box model interact with flexbox and grid layouts?
23Does the box model behave differently for absolutely positioned elements?
24How can you ensure consistent box sizing across all elements on a webpage?
25What’s the role of outline in the box model, and how is it different from border?
26How can you use the box model to achieve responsive layouts?
27How do you debug box model-related issues in a complex layout?
28Explain how min-width, max-width, and overflow affect the box model.
29How do borders affect element dimensions?
CSSCSS
Basics
Selectors
Box model
Text formatters
Positioning
Pseudo classes
Pseudo elements
Flexbox
Grid
Display
Combinators
Overflow
Breakpoint
Transformation and Transition
Frameworks
Everything else
13 / 29

How do margin collapsing rules work in CSS?

Difficulty: 5/10
margin collapsing, block formatting context, layout debugging

Understanding Margin Collapsing in CSS

In CSS, vertical margins of block-level elements can combine (or 'collapse') into a single margin instead of adding up. This happens when the top margin of one element meets the bottom margin of another element, or when an element’s top and bottom margins touch due to empty content or no border/padding in between.

Example of Margin Collapsing
Key Rules of Margin Collapsing
  1. 1

    Only vertical margins (top and bottom) collapse; horizontal margins do not.

  2. 2

    The resulting margin equals the largest of the two overlapping margins, not their sum.

  3. 3

    Margins of parent and first/last child can collapse if no padding, border, or inline content separates them.

  4. 4

    Negative margins can affect the collapsed result — they can reduce or even cancel out positive margins.

  5. 5

    Adding padding, border, or overflow: hidden to the container prevents margin collapsing.

Scenario Questions

0-2 years experience

  1. 1You have a <div> with margin-top:20px followed by another <div> with margin-top:15px. How much vertical space ends up between them and why?
  2. 2If a <section> and its first child <p> both specify margin-top, what final top margin does the <section> render?
  3. 3Without changing the HTML, how would you prevent two adjacent block elements from collapsing their margins?

2-5 years experience

  1. 1Our header has margin-bottom:30px and the main container below it has margin-top:30px, yet we only see a 30px gap. Explain the behavior and how you’d get a 60px gap.
  2. 2A modal’s inner <div> has a top margin that seems to be collapsing with the modal container, causing the content to shift up. Walk me through how you’d debug and fix it.
  3. 3You need a vertical navigation list where each <li> has a 10px space between items but the first item should start 20px from the top. How would you achieve that using margin collapsing rules?

5-8 years experience

  1. 1Our design system’s components rely on margin collapsing for spacing. Adding a theming wrapper <div> around components broke the spacing. How would you redesign the CSS strategy to make spacing robust against such wrappers?
  2. 2Compare using margin collapsing versus padding or CSS Grid’s gap for vertical spacing in a large, responsive layout that must support legacy browsers. What trade‑offs do you consider?
  3. 3A page with many nested sections shows unexpectedly large gaps due to multiple collapsed margins. How would you systematically identify and resolve these issues without rewriting all component markup?

8+ years experience

  1. 1We’re migrating a legacy codebase that heavily relies on margin collapsing to a utility‑first framework like Tailwind. What architectural guidelines would you set to avoid layout regressions caused by collapsed margins across teams?
  2. 2In a cross‑team component library, components need to be composable without their margins interfering. Propose a strategy—including CSS techniques, naming conventions, or BEM modifiers—to isolate margin behavior at scale.
  3. 3How would you instrument automated visual‑regression tests to catch margin‑collapsing bugs introduced by refactoring or new components?

Follow-up Questions

  • What CSS properties can you use to create a new block formatting context?
  • How does margin collapsing interact with floated or absolutely positioned elements?
  • Can you share a real‑world bug you fixed that was caused by unexpected margin collapse?
Share

Share via WhatsApp, X, Facebook, LinkedIn or copy link. Open Graph preview enabled.