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
  2. Flexbox
  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!