
  Every HTML element is a **box**.
  
  ## Box model parts
  1. content
  2. padding
  3. border
  4. margin
  
  ## Example
  ```css
  .card {
    padding: 16px;
    border: 1px solid #ddd;
    margin: 20px;
  }
  ```
  
  ## Real world example
  Think of a package:
  - product → content
  - bubble wrap → padding
  - box → border
  - space between boxes → margin
  
  ## UI result
  Card looks spaced, clean, readable.
  
  ## Remember
  - Padding adds space inside
  - Margin adds space outside
  - Box model controls layout spacing
  

Master the CSS box model: content, padding, border, and margin explained slowly with real layout understanding.

CSS Box Model

Learn CSS for styling modern websites: layouts, flexbox, grid, responsive design, and animations.

CSS Box Model

Box model parts

Example

Real world example

UI result

Remember

More on CSS

CSS Introduction

CSS How It Works

CSS Ways to Add