Lesson 2.6: Spacing & Position

🎯 Objectives

• Learn to manipulate the properties of the box model
• Use flexbox for alignment
• Understand spacing and positioning in HTML/CSS.

Table of Contents

1. Box Model
   • Overview
   • Example
2. Flexbox
   • Introduction
   • Example
3. Positioning
4. Exit Ticket & Closing

Box Model

Overview

The box model consists of four components:

• Content: Actual content (text, images, etc.).
• Padding: Space between content and border.
• Border: Line separating content from padding.
• Margin: Space outside the element.

Box Model Example

h1 {
  border: 4px solid blue;
  padding: 5px;
  margin: 5px;
}

This code adds a solid blue border of 4px, 5px of padding, and 5px of margin to all h1 elements.

Flexbox

Introduction

Flexbox is a set of CSS properties for aligning items on a webpage.

Flexbox Example

HTML:

<div class="container">
  <p>Dogs</p>
  <p>Cats</p>
  <p>Hamsters</p>
</div>

CSS:

.container {
  display: flex;
  justify-content: space-between;
}

This aligns the child elements with space between them.

Positioning

Manipulate an element's position with the position property. Possible values:

• Static
• Relative
• Absolute
• Fixed

Example:

img {
  position: fixed;
  top: 0;
  right: 0;
}

This fixes an image at the top-right corner of the viewport.

Happy coding!