Back to Unit 6

Unit 6 Website Development - Tutorial 2

2.8 Use margin to control space outside an element

Separate elements without changing their inside space.

What You Are Adding

Margin creates space outside an element. It is useful when headings, sections, images or cards are too close together. Margin does not add space inside the element itself.

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.

section {
    margin-bottom: 28px;
}

.club-card {
    margin-top: 16px;
}

Expected Output

First section
Second section has space above it.

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