Lesson 5: The Box Model - "Everything is a Box"

Introduction

In CSS, Every HTML element is a box, understanding this helps with spacing, layout, alignment and not losing your mind.

┌────────────────────────────┐   ← margin (space outside the element)
│   ┌────────────────────┐   │   ← border (the outline)
│   │   ┌────────────┐   │   │   ← padding (space inside the element)
│   │   │  CONTENT   │   │   │   ← content (text, images, etc.)
│   │   └────────────┘   │   │
│   └────────────────────┘   │
└────────────────────────────┘

CSS Properties Involved:

• margin: outside spacing
• border: visual outline
• padding: inside spacing
• width/height: content size - does not include padding or border unless stated
• box-sizing: controls how width/height are calculated