CSS Box Model - Understanding Layout & Spacing - Learn • Build • Collaborate

Understanding the CSS Box Model is the key to controlling layout and spacing on your web pages.

What is the Box Model?

Every HTML element is a box made up of four layers:

┌─────────────────────────────────────┐
│           MARGIN (transparent)       │
│  ┌──────────────────────────────┐  │
│  │   BORDER                      │  │
│  │  ┌────────────────────────┐  │  │
│  │  │  PADDING               │  │  │
│  │  │  ┌──────────────────┐  │  │  │
│  │  │  │   CONTENT        │  │  │  │
│  │  │  │  (text, images)  │  │  │  │
│  │  │  └──────────────────┘  │  │  │
│  │  └────────────────────────┘  │  │
│  └──────────────────────────────┘  │
└─────────────────────────────────────┘

Content — The actual content (text, images, etc.)
Padding — Space between content and border (inside the box)
Border — A line around the padding
Margin — Space outside the border (separates elements)

Content Width and Height

Control the size of the content area:

div {
  width: 300px;
  height: 200px;
}

Auto sizing:

img {
  width: 100%;  /* Takes full width of parent */
  height: auto; /* Maintains aspect ratio */
}

Padding - Space Inside

Padding creates space inside the element (between content and border).

All sides the same:

div {
  padding: 20px;
}

Different sides:

div {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}

Shorthand (clockwise: top, right, bottom, left):

div {
  padding: 10px 20px 10px 20px;
}

More shortcuts:

padding: 10px 20px;      /* vertical horizontal */
padding: 10px 20px 30px; /* top horizontal bottom */

Border - The Box Outline

Border goes around the padding:

div {
  border: 2px solid black;
}

Format: border: width style color

Border Styles:

solid — continuous line
dashed — dashed line
dotted — dotted line
double — double line
none — no border

Individual sides:

div {
  border-top: 3px solid red;
  border-bottom: 1px dashed gray;
}

Rounded corners:

div {
  border: 2px solid black;
  border-radius: 10px; /* All corners */
}

button {
  border-radius: 50%; /* Circle */
}

Margin - Space Outside

Margin creates space outside the element (between elements).

All sides:

div {
  margin: 20px;
}

Individual sides:

div {
  margin-top: 30px;
  margin-bottom: 20px;
  margin-left: 10px;
  margin-right: 10px;
}

Shorthand:

div {
  margin: 10px 20px; /* vertical horizontal */
}

Centering elements:

div {
  width: 600px;
  margin: 0 auto; /* Top/bottom: 0, left/right: auto */
}

This centers a block element horizontally!

Box Sizing

By default, width and height only apply to the content.

Example problem:

div {
  width: 300px;
  padding: 20px;
  border: 2px solid black;
}

Actual width = 344px:

Content: 300px
Padding: 20px × 2 = 40px
Border: 2px × 2 = 4px

Solution: box-sizing: border-box

* {
  box-sizing: border-box;
}

div {
  width: 300px;      /* Total width INCLUDING padding and border */
  padding: 20px;
  border: 2px solid black;
}

Now the total width is exactly 300px. This is a best practice!

Display Property

The display property controls how elements behave:

`display: block`

Takes up full width available
Starts on a new line
Can set width and height

Examples: <div>, <h1>, <p>, <section>

div {
  display: block;
  width: 300px;
  height: 200px;
}

`display: inline`

Only takes up as much width as needed
Does NOT start on a new line
Cannot set width and height

Examples: <span>, <a>, <strong>, <em>

span {
  display: inline;
  background-color: yellow;
}

`display: inline-block`

Like inline, but CAN set width and height
Sits on the same line as other elements

button {
  display: inline-block;
  width: 120px;
  height: 40px;
  padding: 10px;
}

`display: none`

Hides the element completely (removes it from the page flow):

.hidden {
  display: none;
}

Colors in CSS

Named Colors:

h1 {
  color: red;
  background-color: lightblue;
}

Hex Colors:

h1 {
  color: #FF0000;          /* Red */
  background-color: #0000FF; /* Blue */
}

Shorthand: #F00 = #FF0000

RGB Colors:

h1 {
  color: rgb(255, 0, 0);    /* Red */
}

RGBA (with transparency):

div {
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
}

Alpha channel: 0 = fully transparent, 1 = fully opaque

Typography Basics

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: normal; /* or bold, 100-900 */
  font-style: normal;  /* or italic */
  line-height: 1.6;    /* Space between lines */
}

h1 {
  font-size: 2.5em;    /* Relative to parent */
  letter-spacing: 2px; /* Space between letters */
  text-transform: uppercase;
}

p {
  text-align: left;    /* left, center, right, justify */
  text-decoration: none; /* underline, line-through, etc. */
}

Complete Example Project

Let's build a styled card:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Profile Card</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
  <div class="card">
    <img src="https://via.placeholder.com/150" alt="Profile Picture">
    <h2>John Doe</h2>
    <p class="title">Web Developer</p>
    <p class="description">
      Passionate about creating beautiful and functional websites.
    </p>
    <button class="btn">Contact Me</button>
  </div>
  
</body>
</html>

CSS:

/* Global reset and setup */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Arial', sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

/* Card container */
.card {
  background-color: white;
  width: 350px;
  padding: 40px 30px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  text-align: center;
}

/* Profile image */
.card img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 5px solid #667eea;
  margin-bottom: 20px;
}

/* Name */
.card h2 {
  font-size: 28px;
  color: #333;
  margin-bottom: 5px;
}

/* Job title */
.title {
  font-size: 16px;
  color: #667eea;
  font-weight: bold;
  margin-bottom: 15px;
}

/* Description */
.description {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 25px;
}

/* Button */
.btn {
  display: inline-block;
  background-color: #667eea;
  color: white;
  padding: 12px 30px;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: #5568d3;
}

Practice Project

Create your own personal portfolio card!

Requirements:

Use a card layout with proper box model properties (margin, padding, border)
Include:
- Your name (styled heading)
- A brief description
- A profile image (rounded)
- A contact button
Apply box-sizing: border-box to all elements
Center the card on the page
Use colors, spacing, and typography to make it look professional

Bonus challenges:

Add a hover effect to the button
Use a gradient background
Add a subtle shadow to the card
Make the image circular with a border

Summary

You've completed Session 1! Here's what you learned:

HTML:

✅ Page structure and semantic elements
✅ Headings, paragraphs, text formatting
✅ Links, images, lists
✅ Semantic HTML (header, nav, main, footer)

CSS:

✅ Selectors, properties, values
✅ Ways to add CSS (inline, internal, external)
✅ Box model (margin, padding, border)
✅ Display property
✅ Colors and typography

What's Next?

In Session 2, you'll learn advanced CSS layouts including:

Flexbox for flexible layouts
Grid for complex layouts
Positioning elements
Responsive design

Keep practicing and building! The more you code, the better you'll become. 🚀

Happy coding! 💻✨

Introduction to CSS - Making Your Pages Beautiful