LLM Best Practices

Box Model

2 min read

View markdown source

Definition

Every element in CSS is rendered as a rectangular box composed of four nested areas, from inside out: content, padding, border, and margin. The width and height properties apply to the content area by default (box-sizing: content-box). Setting box-sizing: border-box makes width include padding and border, which is almost always preferable because sizing becomes predictable.

Key measurements:

  • Content box: the drawable area for text, images, and child elements.
  • Padding: transparent space between content and border; clicks hit padding.
  • Border: the drawn edge; width, style, and color are independent.
  • Margin: transparent space outside the border; margins of adjacent block-level elements collapse (the larger wins, they do not add).

Margin collapsing happens between sibling block elements and between a parent and its first or last child when no border or padding separates them. Flex and grid containers suppress margin collapsing for their direct children.

When it applies

Apply border-box sizing globally with *, *::before, *::after { box-sizing: border-box; } at the top of every stylesheet. This prevents the classic bug where adding padding to a sized element makes it overflow its container. Margin collapsing is the other common surprise: use padding on the parent or set overflow: auto to break collapsing between parent and child.

Example

/* content-box: actual rendered width = 200 + 20 + 20 + 2 + 2 = 244px */
.box-content { width: 200px; padding: 20px; border: 2px solid; }
 
/* border-box: actual rendered width = 200px exactly */
.box-border { box-sizing: border-box; width: 200px; padding: 20px; border: 2px solid; }
  • layout-shift - unexpected box-model changes cause cumulative layout shift (CLS).
  • em-vs-rem - relative units interact with box model sizing.
  • viewport - the viewport is the outer frame that block elements size against.
  • css - the full CSS deep-dive including layout modes.
  • cascade - box-sizing is resolved through the normal cascade.

Citing this term

See Box Model (llmbestpractices.com/glossary/box-model).

Graph View

Backlinks