Day 3: Box Model & Spacing

Goal

Learn how the CSS box model works and how to control spacing and layout using padding, margin, borders, and background properties.

Topics

Box model: content, padding, border, margin
Width & height
Border styles and border-radius
Background color and background images

The Box Model

Every HTML element is a box consisting of:

Content – the actual text or element
Padding – space inside the box around the content
Border – the edge around the padding
Margin – space outside the element

Example

div {
  width: 200px;
  height: 100px;
  padding: 10px;
  margin: 20px;
  border: 2px solid black;
  border-radius: 10px;
  background-color: lightgray;
}

Border Styles

div {
  border: 2px solid black;
  border-radius: 15px; /* rounded corners */
}

Background

div {
  background-color: lightblue;
}

section {
  background-image: url('background.jpg');
  background-size: cover;
  background-position: center;
}

Practice

Style a card with padding, margin, border, and rounded corners.
Add a background image to a section.

Example HTML & CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Box Model Practice</title>
  <style>
    .card {
      width: 250px;
      padding: 20px;
      margin: 20px;
      border: 2px solid #333;
      border-radius: 15px;
      background-color: #ecf0f1;
      font-family: Arial, sans-serif;
    }

    .hero {
      height: 200px;
      background-image: url('background.jpg');
      background-size: cover;
      background-position: center;
      margin: 20px;
      border-radius: 10px;
    }
  </style>
</head>
<body>

  <h1>Box Model Example</h1>

  <div class="card">
    <h2>Card Title</h2>
    <p>This is a styled card using padding, margin, border, and border-radius.</p>
  </div>

  <section class="hero"></section>

</body>
</html>