Spacing and the box model

Spacing and the box model

Every element is represented by a box with content, padding, border and margin. By default width applies to the content box. A global border-box rule makes sizing more predictable. Margin collapse can occur between block elements.

Try it yourself

Change the example, run it, and explain the result in your own words. Then create one variation of your own.

Key idea

Use the example as a starting point, not something to memorize. Practise, inspect the result and make small improvements.