CSS Box Model Interview Questions

Every element is a rectangle of four layers, inside out: content, padding (takes the background), border, and margin (always transparent).

+------------------- margin -------------------+
|  +--------------- border ----------------+   |
|  |  +----------- padding ------------+   |   |
|  |  |            content             |   |   |
|  |  +--------------------------------+   |   |
|  +---------------------------------------+   |
+----------------------------------------------+

By default width measures only the content; box-sizing changes that. More in the box model docs.

With content-box (the default), width sets the content only and padding and border are added on top. With border-box, width is the whole box.

<style>
  .box { width: 200px; padding: 20px; border: 5px solid #2563eb; margin-bottom: 8px; background: #dbeafe; }
  .content { box-sizing: content-box; }
  .border { box-sizing: border-box; }
</style>
<div class="box content">content-box</div>
<div class="box border">border-box</div>
<script>
  for (const el of document.querySelectorAll('.box')) el.textContent += ': ' + el.offsetWidth + 'px wide';
</script>

The first box is 250px (200 + 2 × 20 + 2 × 5), the second 200px, which is why most resets set border-box on everything.

Padding is space inside the border and shows the element's background; margin is space outside it and is always transparent. Only margins can be negative or auto (margin: 0 auto centers a block), and only vertical margins collapse. Space siblings with gap on the parent. See margin vs padding.

Two touching vertical margins become one equal to the larger, not the sum: 30px then 20px leaves 30px.

<style>
  .a { margin-bottom: 30px; }
  .b { margin-top: 20px; }
  .a, .b { background: #2563eb; color: white; padding: 6px; }
  .flex { display: flex; flex-direction: column; }
  .note { font: 13px monospace; }
</style>
<div class="box"><div class="a">block layout</div><div class="b">next</div></div>
<div class="box flex"><div class="a">flex column</div><div class="b">next</div></div>
<script>
  for (const box of document.querySelectorAll('.box')) {
    const [a, b] = box.children;
    const gap = b.getBoundingClientRect().top - a.getBoundingClientRect().bottom;
    box.insertAdjacentHTML('afterend', '<p class="note">gap: ' + gap + 'px</p>');
  }
</script>

It happens between siblings, between a parent and its first or last child (the margin leaks out), and on empty blocks. Never horizontally, never in flex or grid (the second box shows 50px), and not across padding, a border or display: flow-root.

visible (the default, content spills out), hidden (clipped), clip (clipped, no scrolling at all), scroll (scrollbars always) and auto (scrollbars when needed).

<style>
  .box { display: inline-block; vertical-align: top; width: 140px; height: 60px; margin: 0 8px 40px 0;
         border: 2px solid #2563eb; font-size: 13px; }
  .v { overflow: visible; } .h { overflow: hidden; } .s { overflow: scroll; } .a { overflow: auto; }
</style>
<div class="box v">visible: this text is too long for the box and spills out below it</div>
<div class="box h">hidden: this text is too long for the box and is cut off at the border</div>
<div class="box s">scroll: this text is too long for the box, so you scroll it</div>
<div class="box a">auto: a scrollbar appears only because this text is too long</div>

Trap: hidden still makes a scroll container, which breaks position: sticky inside it; clip does not. Setting only overflow-x: hidden turns overflow-y into auto, so a vertical scrollbar can appear. More in overflow.

A span is inline: its size comes from its text, so width, height and vertical margins are ignored, and vertical padding overlaps the lines around it instead of pushing them away.

<style>
  span { background: #fde68a; }
  .try { width: 200px; height: 60px; margin: 30px; padding: 10px; }
  .ib { display: inline-block; }
</style>
<p>Text before <span class="try">inline span</span> text after, with a second line of text to show that the padding overlaps it.</p>
<p>Text before <span class="try ib">inline-block span</span> text after.</p>

Use display: inline-block or block. Inside a flex or grid parent a span is blockified and accepts a width.

A border is part of the box and takes space; an outline is drawn outside the border, takes none, never shifts the layout and cannot be set per side. Browsers draw keyboard focus with it, so never write outline: none without a replacement; style :focus-visible. For debugging, * { outline: 1px solid red; } shows every box.

For one line you need all four: a constrained width, white-space: nowrap, overflow: hidden and text-overflow: ellipsis. For several lines use -webkit-line-clamp, which every current browser supports despite the prefix.

<style>
  p { width: 220px; border: 1px solid #9ca3af; padding: 4px; }
  .one { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .two { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
</style>
<p class="one">A long product title that will not fit on a single line of this box</p>
<p class="two">A longer description that runs over several lines, and the box shows only the first two of them before the dots appear at the end</p>

Inside a flex row, the item may refuse to shrink: see the min-width: 0 question.

On a block element, width: auto fills the container after subtracting the element's own margin, border and padding. width: 100% makes the content box as wide as the parent's content box, so padding, border and margin are added on top and it overflows.

<style>
  .parent { width: 260px; border: 2px dashed #9ca3af; padding: 4px; }
  .child { padding: 10px; border: 4px solid #2563eb; margin: 4px 0; background: #dbeafe; }
  .full { width: 100%; }
</style>
<div class="parent">
  <div class="child">width: auto fits</div>
  <div class="child full">width: 100% sticks out</div>
</div>

box-sizing: border-box fixes the padding and border part, not the margins. On floats and absolutely positioned elements, auto means shrink to fit the content instead.

Images are inline by default, so they sit on the text baseline, and the line keeps room below the baseline for descenders (the tails of g and p). Fix it with display: block on the image, or vertical-align: middle (or top, bottom) if it must stay inline. An inline <svg> behaves the same, so it stands in for an image here:

<style>
  .box { background: crimson; width: 120px; margin-bottom: 8px; }
  .fixed svg { display: block; }
</style>
<div class="box"><svg width="120" height="60"><rect width="120" height="60" fill="#2563eb"/></svg></div>
<div class="box fixed"><svg width="120" height="60"><rect width="120" height="60" fill="#2563eb"/></svg></div>

The red strip under the first one is that descender space.