CSS Lesson 8 – CSS Box Model | Dataplexa

Lesson 8

CSS Box Model

Master content, padding, borders, and margins to control element spacing and create polished layouts.

Every element on a webpage is a box. Whether it's text, an image, or a button, CSS treats everything as a rectangular container. The box model shows you exactly how these containers work — like looking at the layers of an onion or understanding how a picture frame holds artwork. The box model has four layers that wrap around your content like nested boxes. Understanding these layers means the difference between frustrated guesswork and confident control over your layouts.

The Four Box Model Layers

Think of the box model like a gift box. Your content is the gift inside. Padding is the protective foam around it. The border is the actual box itself. And margin is the space between this box and other boxes on the shelf.

Content
The actual stuff inside — text, images, videos

Padding
Space between content and border — inner breathing room

Border
The visible edge around the element — like a frame

Margin
Space outside the border — distance from other elements

The WanderLust team needs to space their destination cards perfectly. Each card has content (the destination info), padding (space inside the card), a border (the card's edge), and margin (space between cards).

Content Area

The content area holds your actual stuff — text, images, or other elements. You control its size with width and height properties.

    selector
    {
    width
    :
    300px
    ;}
  

Element to style — Property name — Property value

/* Style WanderLust destination cards */
.destination-card {
  width: 280px;     /* Content area width */
  height: 200px;    /* Content area height */
  background: #f8fafc; /* Show the content area */
}

What just happened?

The content area is now exactly 280px wide and 200px tall. Any text or images inside this card will fit within these dimensions. Try this: change the width to 400px and see how the card stretches.

Sizing with Percentages

You can also use percentages to make content areas flexible. A 50% width means "take up half the space of my parent container."

/* Responsive WanderLust cards */
.destination-card {
  width: 100%;      /* Fill the full width available */
  max-width: 400px; /* But never get bigger than 400px */
  height: 250px;    /* Fixed height */
}

Padding — Inner Space

Padding creates space INSIDE an element, between the content and the border. Think of padding like the cushioning inside a phone case — it protects your phone (content) from hitting the hard case (border). Without padding, text smashes against edges and looks cramped. With padding, everything breathes properly.

/* Add breathing room to WanderLust cards */
.destination-card {
  width: 300px;
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  padding: 20px;    /* 20px space on all sides inside */
}

What just happened?

The padding: 20px created 20 pixels of space inside each card. The green card looks professional while the red one appears cramped. Try this: change padding to 40px and watch the inner space grow.

Different Padding on Each Side

You can control padding on each side individually. Maybe the WanderLust cards need more padding on top and bottom than on the sides.

/* Custom padding for each side */
.destination-card {
  width: 280px;
  background: #fff7ed;
  border: 2px solid #fed7aa;
  padding-top: 30px;     /* More space at top */
  padding-right: 15px;   /* Less space on right */
  padding-bottom: 30px;  /* More space at bottom */
  padding-left: 15px;    /* Less space on left */
}

Padding Shorthand

Instead of writing four separate padding properties, you can use shorthand. Shorthand means one property that controls multiple values.

/* Shorthand padding examples */
.card-1 {
  padding: 20px;           /* Same on all 4 sides */
}

.card-2 {
  padding: 30px 15px;      /* 30px top/bottom, 15px left/right */
}

.card-3 {
  padding: 10px 20px 30px 15px; /* top, right, bottom, left (clockwise) */
}

Borders — The Frame

Borders create visible edges around elements. Like a picture frame, borders define where an element ends and separate it from surrounding content. Every border needs three things: width (how thick), style (solid line, dashed, etc.), and color (what color it is).

/* Basic WanderLust card borders */
.destination-card {
  width: 260px;
  padding: 20px;
  background: white;
  border-width: 3px;     /* How thick the border is */
  border-style: solid;   /* Solid line (not dashed/dotted) */
  border-color: #0ea5e9; /* WanderLust blue color */
}

Border Shorthand

Just like padding, you can write all three border properties in one line. The order is always: width, style, color.

/* Different border styles for WanderLust cards */
.featured-card {
  padding: 20px;
  background: white;
  border: 4px solid #f97316;  /* Thick orange border */
}

.premium-card {
  padding: 20px;
  background: #faf5ff;
  border: 2px dashed #7c3aed; /* Thin dashed purple border */
}

.standard-card {
  padding: 20px;
  background: #f0fdf4;
  border: 1px dotted #15803d;  /* Thin dotted green border */
}

What just happened?

Different border styles create different visual effects. Solid borders feel professional, dashed borders suggest flexibility, and dotted borders appear playful. Try this: change "solid" to "double" and see the effect.

Margins — Outer Space

Margins create space OUTSIDE an element, pushing other elements away. Think of margin like the invisible personal space bubble around a person — it keeps things from getting too close. The key difference: padding is inside (between content and border), margin is outside (between border and other elements).

/* Space WanderLust cards apart */
.destination-card {
  width: 240px;
  padding: 15px;
  background: white;
  border: 2px solid #e2e8f0;
  margin: 30px;         /* 30px space around each card */
}

Centering with Auto Margins

Auto margins are magical — they automatically take up available space. Set left and right margins to "auto" and your element centers itself like magic.

/* Center WanderLust cards horizontally */
.destination-card {
  width: 320px;
  padding: 25px;
  background: #e0f9ff;
  border: 3px solid #0ea5e9;
  margin: 20px auto;    /* 20px top/bottom, auto left/right = centered */
}

Box-Sizing — How Size Gets Calculated

Here's where things get tricky. When you set width: 300px, what's actually 300 pixels wide? Just the content? Content plus padding? The whole box? CSS has two ways to calculate size, controlled by the box-sizing property.

Default Behavior: content-box

By default, width and height only control the content area. Padding and borders get ADDED to your specified size, making elements bigger than expected.

/* Default box-sizing creates confusion */
.card-confusing {
  width: 200px;          /* Content area = 200px */
  padding: 20px;         /* Adds 40px total (20px × 2 sides) */
  border: 3px solid #0ea5e9;  /* Adds 6px total (3px × 2 sides) */
  /* ACTUAL TOTAL WIDTH = 200 + 40 + 6 = 246px */
}

/* Better box-sizing makes sense */
.card-logical {
  width: 200px;          /* TOTAL WIDTH = 200px exactly */
  padding: 20px;         
  border: 3px solid #f97316;
  box-sizing: border-box; /* Include padding/border in width */
}

What just happened?

The blue card is 246px wide (200 + 20 + 20 + 3 + 3) while the orange card is exactly 200px wide. The box-sizing: border-box property makes sizing predictable. Try this: add more padding to both and watch what happens.

Most professional developers set all elements to use box-sizing: border-box because it's more logical. When you say 300px, you want 300px total, not 300px plus extras.

/* Set border-box for everything - common professional practice */
* {
  box-sizing: border-box;
}

/* Now all WanderLust elements behave predictably */
.destination-card {
  width: 300px;        /* ACTUAL total width = exactly 300px */
  padding: 25px;       /* Fits inside the 300px */
  border: 2px solid #0ea5e9; /* Also fits inside */
}

Quiz

Up Next: Backgrounds

Transform elements with colors, gradients, images, and patterns to create stunning visual designs.

← Previous Course Index Next →