Codeloft
0 0 XP
Lesson 3 of 7
01Color and fonts02Classes and IDs03The box model04Layout with flexbox05Layout with grid06Responsive design07Hover effects and transitions

The box model

7 min 20 XP + 10 for no hints

Every element is a box with four layers, from the inside out:

  • content, the text or image itself
  • padding, space inside the border
  • border, the line around the box
  • margin, space outside the border

Padding makes a box feel comfortable to read. border-radius rounds its corners.

Example
<style>
  .box { padding: 16px; border: 3px solid teal; margin: 20px; }
</style>
<div class="box">Padding inside, margin outside</div>
border: 2px solid navy; sets the width, style and color in one line.

Your tasks

0 of 3 done
  1. Give .card at least 16px of padding
  2. Add a border to .card
  3. Round the corners with border-radius

Quick check

Which layer adds space outside the border?

Classes and IDsLayout with flexbox
card.htmlUpdates as you type