01 / THE BIG IDEA

Every element takes up space

Think about a poster, magazine spread, or gallery wall. The placement of each element matters, but so does the empty space around it. Space helps separate information, create emphasis, and make a composition easier to understand.

Web pages work in a similar way. CSS lets us control the space inside and outside elements so the page feels intentional rather than crowded.

02 / THE BOX MODEL

Understand the parts of a box

In CSS, every element can be understood as a rectangular box. The Box Model describes the layers that determine how much space that element occupies.

Imagine the layers from the center outward:

1. Content: Your text, image, or other material.
2. Padding: Space between the content and the border.
3. Border: The visible edge around the element.
4. Margin: Space outside the border.

03 / PADDING

Create space inside an element

Padding controls the space between an element's content and its border. Increasing padding can make a box feel more comfortable and less cramped.

.card {
  background-color: #edf3ff;
  padding: 20px;
}

This rule gives every side of the element 20 pixels of space between the content and its edge.

Experiment with padding

.card {
  padding: 5px;
}

.card {
  padding: 30px;
}

Compare the two versions. The larger value creates more room inside the element without changing the wording.

04 / MARGIN

Create space between elements

Margin controls the space outside an element's border. Use it to separate sections, create distance between headings and paragraphs, or prevent content blocks from feeling crowded.

h2 {
  margin-bottom: 20px;
}

This adds space below every level-two heading targeted by the rule.

Four margin properties

.card {
  margin-top: 10px;
  margin-right: 15px;
  margin-bottom: 20px;
  margin-left: 15px;
}

You can also use the shorthand property to set all four sides at once:

.card {
  margin: 20px;
}

05 / BORDERS

Define the edge of an element

A border creates a visible boundary around an element. Borders can be subtle, bold, solid, dashed, or rounded. They can help organize a layout without adding more content.

.card {
  border: 2px solid #2855d9;
}

The shorthand combines three values:

• 2px is the border thickness.
• solid is the border style.
• #2855d9 is the border color.

.card {
  border: 1px solid #dce3ed;
  border-radius: 12px;
}

The border-radius property rounds the corners. Larger values create a more rounded appearance.

06 / WIDTH & HEIGHT

Control the size of a box

CSS can control an element's width and height. Fixed values can be useful for specific components, but flexible values often work better when a page needs to adapt to different screen sizes.

.card {
  width: 300px;
}

This asks the browser to make the content box 300 pixels wide under the default content-box sizing model.

.card {
  width: 100%;
  max-width: 600px;
}

This lets the element fill the available width up to 600 pixels. It is often more adaptable than specifying a large fixed width.

07 / BOX-SIZING

Make dimensions easier to predict

By default, CSS calculates an element's declared width using its content box. Padding and borders are then added outside that width. This can make an element larger than expected.

.card {
  width: 300px;
  padding: 20px;
  border: 5px solid #2855d9;
}

With the default sizing model, the total width is 300 pixels of content, plus 40 pixels of horizontal padding, plus 10 pixels of borders: 350 pixels altogether.

* {
  box-sizing: border-box;
}

With border-box, the declared width includes the content, padding, and border. In this example, the total width remains 300 pixels, and the content area becomes smaller to make room for padding and borders.

08 / SYNCHRONOUS CLASS ACTIVITY

Turn a crowded page into a clean layout

During our live session, we will take a simple page with headings, paragraphs, and a list. We will use spacing and borders to create a more organized design.

<h1>My Creative Practice</h1>

<section class="card">
  <h2>What I Do</h2>
  <p>I enjoy exploring ideas through art and design.</p>
</section>

<section class="card">
  <h2>My Interests</h2>
  <ul>
    <li>Photography</li>
    <li>Drawing</li>
    <li>Graphic design</li>
  </ul>
</section>

body {
  font-family: Arial, sans-serif;
  background-color: #f2f4f8;
  color: #182033;
}

.card {
  background-color: #ffffff;
  border: 1px solid #dce3ed;
}

Guided exercise

1. Open a new CodePen or your existing project.
2. Add the starter HTML to the HTML panel and the starter CSS to the CSS panel.
3. Add padding: 20px; to the card rule.
4. Add margin-bottom: 20px; to create space between the cards.
5. Add border-radius: 12px; to round the card corners.
6. Change the padding and margin values to compare the results.
7. Add box-sizing: border-box; to the universal selector.

09 / INDEPENDENT PROJECT

Design a page with intentional spacing

Continue working on your personal-interest website. This week, focus on spacing and the way content blocks relate to one another. Your goal is to make the page feel organized and comfortable to explore.

Project requirements

• Continue using your existing HTML and CSS project.
• Use padding to add space inside at least two content areas.
• Use margin to separate sections or elements.
• Apply at least one border or border-radius rule.
• Use width or max-width to control the size of a content area.
• Include box-sizing: border-box; in your CSS.
• Keep the text readable and the existing links functional.
• Submit your working CodePen link through D2L.

10 / SUBMISSION & REFLECTION

Explain how spacing changed your page

Submit your CodePen link through the Week 7 assignment area in D2L. Before submitting, check that the sections have enough breathing room and that the page still works at a narrower browser width.

Reflection questions

1. In your own words, what is the difference between margin and padding?
2. Which spacing change made the biggest improvement to your page?
3. What did you discover about the way width, padding, and borders affect an element's size?

11 / QUICK REFERENCE

CSS properties from this week

12 / LOOKING AHEAD

Next week: Midterm website project

In Week 8, you will bring together the HTML and CSS skills developed so far. Your midterm project will give you an opportunity to organize content, create navigation, use images, develop a visual identity, establish typography, and control spacing.

Before the midterm, review your previous assignments and make sure you understand the basic purpose of each property. You can reuse and adapt code examples from earlier lessons as you build your project.