What concrete layout differences does a browser's quirks mode produce compared with standards mode?

## The mental model Quirks mode is not "an older browser". It is today's engine running a small, fixed set of legacy layout and CSS-parsing rules so that pages authored before the specifications settled still look the way their authors intended. Everything else about the browser is unchanged: the same HTML parser, the same JavaScript engine, the same modern CSS features. Knowing *which* rules change is what separates a real answer from "quirks mode is bad, always add a doctype". ## 1. The box model This is the difference interviewers are fishing for. In standards mode, `width` and `height` size the **content box**; padding and border are added outside it. In quirks mode they size the **border box**, so padding and border eat into the declared size. ```css .box { width: 300px; padding: 20px; border: 10px solid; } /* standards mode: 300 + 40 + 20 = 360px wide on screen */ /* quirks mode: 300px wide, leaving 240px of content */ ``` The quirks behaviour is the same shape as `box-sizing: border-box`, which is why a stylesheet that already sets `border-box` everywhere is less exposed to the mode difference — though only for this one rule. ## 2. Percentage heights In standards mode a percentage `height` resolves only against a containing block with a definite height; if the parent's height is `auto`, the percentage does not resolve and the element behaves as `auto`. That is why the classic full-height layout needs height declared on the html and body elements before a child's `height: 100%` does anything. Quirks mode is more forgiving: it will resolve the percentage by looking further up, so `height: 100%` on a child often "just works". Stylesheets written against that assumption collapse the moment the document is switched to standards mode — one of the most common surprises during a migration. ## 3. Looser CSS parsing Quirks mode keeps two parsing hacks alive for authors who wrote CSS the way they wrote HTML attributes: ```css /* Both are invalid CSS, and both are honoured only in quirks mode */ .banner { width: 400; } /* unitless length quirk */ .banner { color: ff0000; } /* hashless hex colour quirk */ ``` In standards mode each of these declarations is simply dropped as invalid. Note that this cuts both ways: a stylesheet full of missing units may look fine in a quirks-mode page and lose half its declarations after the doctype is added. ## 4. The image gap in a line box An `<img>` is an inline-level element, so it sits on the text baseline, and the line box that contains it reserves room for the descenders of text that could sit alongside it. The result is the familiar few pixels of space under an image inside a container sized to it. ```html <div style="border: 1px solid"><img src="logo.png" alt="" width="100" height="40"></div> <!-- standards mode: a small gap below the image, inside the border --> ``` In quirks mode (and in almost-standards mode) a line box that contains no actual text is sized to its tallest inline box, so that gap disappears. Layouts of the table-and-sliced-image era depended on it being absent. ## 5. Table font inheritance Another documented quirk: font properties set on an ancestor do not inherit into tables the way they do in standards mode, so text inside a `<table>` can fall back to the browser's default face and size even though the surrounding page uses your typeface. ## What does *not* change Be explicit about this, because weak answers overreach: - No CSS or JavaScript feature is disabled. Grid, flexbox, custom properties, `async`/`await` all work. - Parsing and error recovery are identical — implied tags, auto-closing and unclosed-tag handling are the same algorithm. - Modern layout primitives are not "quirks-proof" as a class; a flex container still lays out normally, but the sizes you feed it are computed under the quirks box model. ## Why this matters beyond trivia The practical consequence is that quirks mode is not a cosmetic problem you can shrug off. Two of the five differences — the box model and percentage heights — change *numbers* rather than appearance, so bugs surface as a layout that is subtly wrong at some viewport widths rather than obviously broken. That is why the fix is always to switch the document to standards mode and correct the stylesheet, not to compensate for quirks behaviour inside CSS.