Box Model and Display

Every element on a page is a box. Once you understand that box, spacing bugs become much easier to fix.

The Four Layers

The CSS box model includes:

• content
• padding
• border
• margin

.card {
  width: 320px;
  padding: 24px;
  border: 1px solid #cbd5e1;
  margin: 16px auto;
}

Without box-sizing: border-box, the real rendered width becomes wider than 320px because padding and border are added outside the content box.

Use border-box

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

This makes sizing more predictable because declared width includes padding and border.

Display Values You Will Use Most

.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.grid { display: grid; }
.none { display: none; }

Practical Notes

• block elements take full available width by default.
• inline elements do not accept width and height in the same way.
• inline-block mixes flow behavior with box sizing.
• flex and grid create modern layout contexts.

Debugging Spacing Faster

When a layout looks wrong, inspect:

1. the element width
2. the computed margin and padding
3. the parent display mode
4. whether box-sizing is in effect

Next Step

Continue to Flexbox and Grid to build layouts instead of just styling individual boxes.