vibecodai logovibecodai
← All CSS lessons

CSS · Lesson 3 · 12 min

The Box Model

Padding, border, and margin control spacing.

You will learn

  • Add padding inside an element
  • Add margin outside an element
  • Use border-radius for rounded corners

Every element is a box. Padding is space inside the border. Margin is space outside. border sits between them.

Edit CSS — live preview below

HTML context (read-only)
<div class="card">
  <h2>Card title</h2>
  <p>Content inside the card.</p>
</div>
CSS
Live preview

Tip: Increase padding to 2rem for more breathing room.