The Box Model

Every rendered element occupies a box: content surrounded by padding, a border, and margin. Layout becomes predictable when declared dimensions include the parts you expect.

Use border-box sizing

01*, *::before, *::after {
02  box-sizing: border-box;
03}

With border-box, a declared width includes content, padding, and border. Without it, padding and border are added outside the width.

01.card {
02  width: min(100%, 32rem);
03  padding: 1.5rem;
04  border: 1px solid #ded9e1;
05  margin-inline: auto;
06}

Block, inline, and flow

Block boxes normally fill available inline space and start on a new line. Inline boxes flow with text. inline-block, flex, and grid create different formatting contexts.

Logical properties and overflow

Logical properties follow writing direction, making layouts more adaptable.

01.notice {
02  padding-block: 1rem;
03  padding-inline: 1.25rem;
04  border-inline-start: 3px solid #f46537;
05  overflow-wrap: anywhere;
06}

Use overflow: auto for intentionally scrollable regions. Avoid hiding overflow simply to conceal a layout bug.

Keep this

Set global border-box, use logical properties, and distinguish internal padding from external layout spacing.