Box Model & Layout

CSS Margins

Create spacing between elements.

1Spacing Out

Margins push other elements away.

Example Code

css

div {
  margin: 20px; /* All sides */
  margin-top: 50px;
  margin: 0 auto; /* Horizontally center */
}

2Understand it in a real interface

Margins separate neighboring boxes, while padding separates a box’s content from its own edge. Vertical margins can collapse in certain normal-flow layouts, so the visible separation is not always the sum of two values. Flex and grid gap are often easier to manage for repeated component spacing.

3Try it yourself

Place two paragraphs in a plain container and give both vertical margins. Measure their separation, then put them in a flex column with gap. Compare the models and choose the one that expresses the spacing purpose most clearly. Avoid stacking unrelated spacing values without checking the result.

Finished reading?

Mark this topic as complete to track progress.

CSS Borders

Next Topic

CSS Padding