Box Model and Spacing

Margin and Gap Stack

A small task list becomes readable as the container gets spacing and the children receive consistent gaps.

Program

Spacing can belong outside an element or between its children. Margin separates the whole group; gap separates items inside a layout.

margin_gap_stack.html
Visuals: captured from real browser rendering
<style>
.tasks { width: 300px; }
.tasks { margin: 24px auto; }
.tasks { display: grid; gap: 10px; }
.tasks p { margin: 0; padding: 10px; background: #f8fafc; }
</style>

<section class="tasks">
  <h2>Today</h2>
  <p>Review copy</p>
  <p>Ship update</p>
</section>

  1. Set a readable list width.

    The task section takes a stable width.
    A width makes the spacing changes easier to compare.

  2. Center the whole task group.

    The task panel moves inward and centers in the preview.
    Margin creates space outside the section.

  3. Create consistent space between children.

    The heading and task rows separate evenly.
    Gap belongs to the layout container, not each child.

  4. Reset row margins and style each task.

    Each task becomes a compact row.
    Scoped child rules make the gap the only vertical spacing.
margin Margin creates space outside an element.
gap Gap creates consistent spacing between flex or grid children.