Back to Unit 6

Unit 6 Website Development - Tutorial 2

2.7 Understand the box model

See how content, padding, border and margin affect layout.

What You Are Adding

Every HTML element is treated like a box. The content is inside the box, padding creates space inside the border, the border marks the edge, and margin creates space outside the element.

CSS To Add To css/style.css

Add or adapt this CSS in the stylesheet you created in Tutorial 1. Keep the HTML structure from Tutorial 1 and use CSS to improve the presentation.

.club-card {
    margin: 20px;
    padding: 18px;
    border: 2px solid #365fd0;
}

Expected Output

content

Padding is inside the border. Margin is outside the element.

Build It Yourself

  1. Open the same unit-6-website folder from Tutorial 1.
  2. Add or update the relevant HTML class names if this page uses classes.
  3. Add the CSS shown above to css/style.css.
  4. Save the stylesheet and refresh the website in the browser.
  5. Compare your page with the expected output preview.

Common Mistakes

Success Checklist