Lesson 6: The Box Model
Every single element on a web page is a rectangular box. Understanding the CSS Box Model — content, padding, border, margin — is the key to controlling layout and spacing.
Key Concepts
The Four Layers
From inside out: Content (the actual text or image), Padding (space inside the box between content and border), Border (a line around the box), Margin (space outside the box, pushing other elements away).
Box Sizing
By default, width only sets the content width, so padding and border make the element bigger. box-sizing: border-box includes padding and border in the width — much easier to work with. Most modern CSS starts with this.
Display Types
display: block takes the full width and starts on a new line (<div>, <p>, <h1>). display: inline sits in line with text (<span>, <a>). display: inline-block is both — sits inline but you can set width and height.
🆕 Live Editor
Edit the code — the preview updates live!