Module 6: Margins, Padding, and Icons
Understand spacing and add icons to your web pages
Welcome to Module 6! Today we'll master two fundamental CSS concepts: spacing (margins and padding) and how to enhance your designs with icon libraries.
Learning Outcomes:
- Margins: Space outside elements
- Padding: Space inside elements
- Using icon libraries like Font Awesome
- The box model explained
- Practical spacing techniques
The Box Model
Every element in CSS is a rectangular box with these properties:
Content Area (with padding)
← Margin →
Margin vs Padding
Margin Example
margin: 30px;
Creates space outside the element, pushing other elements away.
Padding Example
padding: 30px;
Creates space inside the element, around the content.
Shorthand Notation
/* All sides */
margin: 10px;
padding: 15px;
/* Vertical | Horizontal */
margin: 10px 20px;
padding: 15px 25px;
/* Top | Right | Bottom | Left (clockwise) */
margin: 5px 10px 15px 20px;
padding: 10px 15px 20px 25px;Working with Icons
Icons enhance usability and visual appeal. Let's use Font Awesome:
Popular Icon Categories
Home
<i class="fas fa-home"></i>
User
<i class="fas fa-user"></i>
Settings
<i class="fas fa-cog"></i>
Search
<i class="fas fa-search"></i>
Heart
<i class="fas fa-heart"></i>
Notification
<i class="fas fa-bell"></i>
How to Use Font Awesome
Add this to your <head> section:
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">Then use icons anywhere:
<!-- Solid style -->
<i class="fas fa-icon-name"></i>
<!-- Regular style -->
<i class="far fa-icon-name"></i>
<!-- Brand icons -->
<i class="fab fa-icon-name"></i>