Box Model & Layout

CSS Box Model

The foundation of layout: Content, Padding, Border, Margin.

1The Components

Every element is a box. Padding clears space inside border. Margin clears space outside border.

Example Code

css

div {
  width: 300px;
  padding: 20px;
  border: 5px solid gray;
  margin: 10px;
}

2Understand it in a real interface

A component’s visible size includes its content, padding, and border. With border-box sizing, the specified width includes padding and border, making it easier to reason about a card inside a constrained container. Margins remain outside that box and affect its relationship with surrounding elements.

3Try it yourself

Create a 240-pixel card with padding and a border. Measure it with content-box sizing, then switch to border-box and compare. Add an adjacent card and adjust gap or margins separately so that you can distinguish element size from spacing between elements.

Finished reading?

Mark this topic as complete to track progress.

CSS !important

Next Topic

CSS Borders