3.3: Box Model & Layout Fundamentals

1. The CSS Box Model

Every HTML element is rendered as a rectangular box consisting of four areas.

The Four Box Areas

From inside out:

1. Content - The actual content (text, images) with defined width and height
2. Padding - Space between content and border (transparent, inside spacing)
3. Border - Line around padding (can have color, width, and style)
4. Margin - Space outside border (transparent, separates from other elements)

Box Model in CSS

.box {
  width: 200px;           /* Content width */
  height: 100px;          /* Content height */
  padding: 20px;          /* Inside spacing */
  border: 2px solid black; /* Border */
  margin: 10px;           /* Outside spacing */
}

/* Total width calculation:
   200px (content)
   + 40px (padding: 20px × 2)
   + 4px (border: 2px × 2)
   + 20px (margin: 10px × 2)
   = 264px total space
*/

2. Margin

Margin creates space outside the element's border.

Margin Syntax

/* All sides */
.box {
  margin: 20px;
}

/* Vertical | Horizontal */
.box {
  margin: 20px 40px;
}

/* Top | Horizontal | Bottom */
.box {
  margin: 10px 20px 30px;
}

/* Top | Right | Bottom | Left (clockwise) */
.box {
  margin: 10px 20px 30px 40px;
}

/* Individual sides */
.box {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

Margin Values

/* Fixed units */
.box {
  margin: 20px;        /* Pixels */
  margin: 2rem;        /* Relative to root font-size */
  margin: 1em;         /* Relative to element font-size */
}

/* Percentage (of parent width) */
.box {
  margin: 5%;          /* 5% of parent width */
}

/* Auto (horizontal centering) */
.box {
  width: 800px;
  margin: 0 auto;      /* Centers block element */
}

/* Negative margins */
.box {
  margin-top: -20px;   /* Pulls element up */
  margin-left: -10px;  /* Pulls element left */
}

Margin Collapse

Vertical margins collapse (combine into one).

<div style="margin-bottom: 30px;">Box 1</div>
<div style="margin-top: 20px;">Box 2</div>

Result: 30px space between (not 50px) - larger margin wins

Horizontal margins don't collapse:

<span style="margin-right: 30px;">Text 1</span>
<span style="margin-left: 20px;">Text 2</span>

Result: 50px space between (margins add up)

Centering with Margin

/* Horizontal centering (block elements) */
.container {
  width: 1200px;
  margin: 0 auto;
}

/* Not centered (inline elements need text-align) */
.inline-element {
  margin: 0 auto;  /* Won't work for inline elements */
}

3. Padding

Padding creates space inside the element, between content and border.

Padding Syntax

/* Same syntax as margin */
.box {
  padding: 20px;                    /* All sides */
  padding: 10px 20px;              /* Vertical | Horizontal */
  padding: 10px 20px 30px 40px;    /* Top | Right | Bottom | Left */
}

/* Individual sides */
.box {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

Padding vs Margin

Use padding when:

• ✅ Adding space inside an element
• ✅ Increasing clickable area
• ✅ Creating breathing room for content
• ✅ Background/border should extend to the space

Use margin when:

• ✅ Creating space between elements
• ✅ Centering elements
• ✅ Pushing elements apart
• ✅ Space should be transparent

Example:

/* Button with padding (background extends) */
.button {
  padding: 10px 20px;
  background: blue;
  color: white;
}

/* Card spacing (margin separates cards) */
.card {
  padding: 20px;        /* Inside spacing */
  margin-bottom: 20px;  /* Space between cards */
  background: white;
  border: 1px solid #ddd;
}

4. Border

Border sits between padding and margin.

Border Properties

/* Shorthand */
.box {
  border: 2px solid black;
  /* width | style | color */
}

/* Individual properties */
.box {
  border-width: 2px;
  border-style: solid;
  border-color: black;
}

/* Individual sides */
.box {
  border-top: 1px solid red;
  border-right: 2px dashed blue;
  border-bottom: 3px dotted green;
  border-left: 4px double orange;
}

Border Styles

.box {
  border-style: solid;    /* ────── */
  border-style: dashed;   /* - - - - */
  border-style: dotted;   /* ······ */
  border-style: double;   /* ══════ */
  border-style: groove;   /* 3D grooved */
  border-style: ridge;    /* 3D ridged */
  border-style: inset;    /* 3D inset */
  border-style: outset;   /* 3D outset */
  border-style: none;     /* No border */
  border-style: hidden;   /* No border */
}

Border Radius

/* All corners */
.box {
  border-radius: 10px;
}

/* Individual corners (clockwise from top-left) */
.box {
  border-radius: 10px 20px 30px 40px;
}

/* Two values: top-left+bottom-right | top-right+bottom-left */
.box {
  border-radius: 10px 20px;
}

/* Individual corners */
.box {
  border-top-left-radius: 10px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 40px;
}

/* Circle */
.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

/* Pill shape */
.pill {
  border-radius: 999px;
  padding: 10px 20px;
}

Border Images

.box {
  border: 10px solid transparent;
  border-image: url('border.png') 30 round;
}

5. Box-Sizing

Controls how width and height are calculated.

content-box (Default)

Width/height apply to content only.

.box {
  box-sizing: content-box; /* Default */
  width: 200px;
  padding: 20px;
  border: 2px solid black;
}

/* Total width:
   200px (content)
   + 40px (padding: 20px × 2)
   + 4px (border: 2px × 2)
   = 244px
*/

border-box (Recommended)

Width/height include padding and border.

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 2px solid black;
}

/* Total width: 200px
   Content width = 200px - 40px (padding) - 4px (border) = 156px
*/

Universal Box-Sizing (Best Practice)

/* Apply to all elements */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Or on html element (inheritable) */
html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

Why border-box is better:

• ✅ Predictable sizing
• ✅ Easier math (width = total width)
• ✅ Simpler responsive design
• ✅ Industry standard

6. Width and Height

Fixed Dimensions

.box {
  width: 300px;
  height: 200px;
}

/* Percentage (of parent) */
.box {
  width: 50%;     /* 50% of parent width */
  height: 100%;   /* 100% of parent height */
}

Min/Max Constraints

/* Responsive with constraints */
.container {
  width: 100%;
  max-width: 1200px;    /* Won't grow beyond 1200px */
  min-width: 320px;     /* Won't shrink below 320px */
  margin: 0 auto;       /* Center it */
}

/* Flexible height */
.box {
  min-height: 200px;    /* At least 200px tall */
  max-height: 500px;    /* Won't exceed 500px */
  overflow: auto;       /* Scroll if content overflows */
}

Auto Width/Height

/* Block elements default to width: auto (100% of parent) */
div {
  width: auto;  /* Default behavior */
}

/* Height auto fits content */
div {
  height: auto; /* Default behavior */
}

Viewport Units

.hero {
  width: 100vw;   /* 100% of viewport width */
  height: 100vh;  /* 100% of viewport height */
}

.sidebar {
  width: 30vw;    /* 30% of viewport width */
  min-height: 50vh; /* Minimum 50% of viewport height */
}

7. Display Property

Controls how elements are rendered in the layout.

Display Types

/* Block (takes full width, new line) */
.block {
  display: block;
}

/* Inline (flows with text, no width/height) */
.inline {
  display: inline;
}

/* Inline-block (inline but accepts width/height) */
.inline-block {
  display: inline-block;
  width: 200px;
  height: 100px;
}

/* None (hidden, no space) */
.hidden {
  display: none;
}

Block vs Inline vs Inline-Block

Block:

• Takes full width available
• Starts on new line
• Accepts width, height, margin, padding

Inline:

• Only as wide as content
• Flows with text
• Ignores width, height
• Vertical margin/padding don't work properly

Inline-block:

• Only as wide as content (or set width)
• Flows with text
• Accepts width, height, all margin/padding

Example:

/* Navigation items */
.nav {
  display: inline-block;
  padding: 10px 20px;
  margin: 0 5px;
  background: blue;
  color: white;
}

/* Card components */
.card {
  display: block;
  width: 100%;
  padding: 20px;
  margin-bottom: 20px;
}

8. Overflow

Controls what happens when content exceeds element dimensions.

Overflow Values

/* Visible (default - content spills out) */
.box {
  overflow: visible;
}

/* Hidden (content is clipped) */
.box {
  overflow: hidden;
}

/* Scroll (always show scrollbars) */
.box {
  overflow: scroll;
}

/* Auto (scrollbars only when needed) */
.box {
  overflow: auto;
  max-height: 300px;
}

/* Individual axes */
.box {
  overflow-x: auto;    /* Horizontal scroll */
  overflow-y: hidden;  /* Vertical clip */
}

Practical Uses

Scrollable container:

.chat-messages {
  height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
}

Clearfix (for floats):

.clearfix {
  overflow: auto;
}

Text truncation:

.truncate {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Result: "This is a long text tha..." */

9. Practical Examples

Card Component

.card {
  /* Box model */
  width: 300px;
  padding: 20px;
  margin: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;

  /* Layout */
  box-sizing: border-box;
  display: block;

  /* Visual */
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

Centered Container

.container {
  /* Responsive width with constraints */
  width: 100%;
  max-width: 1200px;

  /* Centering */
  margin: 0 auto;

  /* Spacing */
  padding: 0 20px;

  /* Box model */
  box-sizing: border-box;
}

Button

.button {
  /* Display */
  display: inline-block;

  /* Spacing */
  padding: 12px 24px;
  margin: 5px;

  /* Visual */
  border: 2px solid #42b883;
  border-radius: 4px;
  background: #42b883;
  color: white;

  /* Box sizing */
  box-sizing: border-box;
}

10. Debugging Box Model

Browser DevTools

Chrome/Edge/Firefox:

1. Right-click element → Inspect
2. Elements panel → Styles tab → Box Model diagram
3. Hover over box model areas to highlight on page

Box Model Visualizer shows:

• Margin (orange)
• Border (yellow)
• Padding (green)
• Content (blue)

Console tricks:

// Get computed styles
getComputedStyle(document.querySelector('.box')).width

// Get box model values
let box = document.querySelector('.box');
let styles = getComputedStyle(box);
console.log({
  width: styles.width,
  padding: styles.padding,
  margin: styles.margin,
  border: styles.border
});

Common Layout Issues

Problem: Element wider than expected

/* Issue: width doesn't include padding/border */
.box {
  width: 100%;
  padding: 20px;
  border: 2px solid black;
}

/* Solution: Use border-box */
.box {
  box-sizing: border-box;
  width: 100%;
  padding: 20px;
  border: 2px solid black;
}

Problem: Margins not working

/* Issue: Inline elements ignore vertical margins */
span {
  margin-top: 20px;  /* Won't work */
}

/* Solution: Use inline-block or block */
span {
  display: inline-block;
  margin-top: 20px;  /* Works now */
}

11. Practical Exercises

Exercise 3.3.1: Box Model Calculation

Calculate the total width of this element:

.box {
  width: 300px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
  box-sizing: content-box;
}

Then change to box-sizing: border-box and recalculate.

Exercise 3.3.2: Create a Card Layout

Build a card component with:

• 320px width
• 20px padding all around
• 1px border
• 10px border radius
• 16px margin bottom
• Use border-box sizing

Exercise 3.3.3: Centering Challenge

Create a centered container that:

• Is 90% wide on mobile (max 1200px)
• Has 20px horizontal padding
• Is centered on the page
• Uses border-box

Exercise 3.3.4: Spacing System

Create a spacing system using classes:

.m-1 { margin: 8px; }
.m-2 { margin: 16px; }
.p-1 { padding: 8px; }
/* etc... */

12. Knowledge Check

Question 1: What are the four areas of the box model?

Question 2: What's the difference between margin and padding?

Question 3: How do you calculate total width with box-sizing: content-box?

Question 4: What's the difference between display: inline and display: inline-block?

Question 5: What does margin: 0 auto do?

Question 6: When do vertical margins collapse?

13. Common Mistakes to Avoid

❌ Forgetting Box-Sizing

/* Bad - unpredictable widths */
.box {
  width: 100%;
  padding: 20px;
}

/* Good - predictable width */
.box {
  box-sizing: border-box;
  width: 100%;
  padding: 20px;
}

❌ Using Height: 100% Incorrectly

/* Won't work - parent has no height */
.child {
  height: 100%;
}

/* Fix - give parent a height */
.parent {
  height: 400px;
}

.child {
  height: 100%;
}

❌ Inline Elements with Block Properties

/* Won't work */
span {
  width: 200px;
  height: 100px;
  margin-top: 20px;
}

/* Fix */
span {
  display: inline-block;
  width: 200px;
  height: 100px;
  margin-top: 20px;
}

14. Key Takeaways

✅ Box model - Content, Padding, Border, Margin (inside to outside) ✅ Box-sizing: border-box - Include padding/border in width/height ✅ Margin - Outside spacing, can be negative, vertical margins collapse ✅ Padding - Inside spacing, extends background/border ✅ Border - Between padding and margin, affects total size ✅ Display types - block (full width), inline (flows), inline-block (hybrid) ✅ Width constraints - Use max-width for responsive layouts ✅ Centering - margin: 0 auto for horizontal centering ✅ Overflow - Control content that exceeds dimensions ✅ DevTools - Essential for visualizing and debugging box model

15. Further Resources

Official Documentation:

• MDN Box Model
• MDN Box Sizing

Interactive Learning:

• Box Model Interactive

Reference:

• CSS Tricks Box Sizing

Next Steps

Great work! You now understand how CSS calculates element dimensions and spacing.

In Lesson 3.4: Flexbox Layout, you'll learn modern one-dimensional layout techniques for creating flexible, responsive designs.