What is the Box Model?
Every HTML element is a “box” with four areas:
┌──────────────────────────────────────────┐
│ MARGIN (exterior) │
│ ┌────────────────────────────────────┐ │
│ │ BORDER (borde) │ │
│ │ ┌──────────────────────────────┐ │ │
│ │ │ PADDING (interior) │ │ │
│ │ │ ┌────────────────────────┐ │ │ │
│ │ │ │ CONTENT │ │ │ │
│ │ │ │ (contenido/texto) │ │ │ │
│ │ │ └────────────────────────┘ │ │ │
│ │ └──────────────────────────────┘ │ │
│ └────────────────────────────────────┘ │
└──────────────────────────────────────────┘
The Four Areas
Content
The actual content - text, images, etc.
.box {
width: 200px; /* Content width */
height: 100px; /* Content height */
}
Padding
Space inside the element, between content and border.
.box {
padding: 20px; /* Space inside, around content */
}
Border
The border around the element.
.box {
border: 2px solid var(--color-gray-300);
}
Margin
Space outside the element, between elements.
.box {
margin: 16px; /* Space outside, between boxes */
}
Box-Sizing Property
Controls how width and height are calculated.
.box {
box-sizing: content-box; /* Default */
width: 200px;
padding: 20px;
border: 2px solid black;
}
/* Total width = 200 + 40 + 4 = 244px */
/* width + padding-left + padding-right + border-left + border-right */
Always use border-box - it makes sizing more predictable and easier to work with.
Global Border-Box
Apply to all elements in your reset:
*,
*::before,
*::after {
box-sizing: border-box;
}
Shorthand Properties
One Value - All Sides
margin: 10px; /* 10px on all sides */
padding: 10px;
Two Values - Vertical | Horizontal
margin: 10px 20px; /* 10px top/bottom, 20px left/right */
padding: 10px 20px;
Three Values - Top | Horizontal | Bottom
margin: 10px 20px 30px; /* 10px top, 20px left/right, 30px bottom */
Four Values - TRBL (Clockwise)
margin: 10px 20px 30px 40px;
/* Top: 10px */
/* Right: 20px */
/* Bottom: 30px */
/* Left: 40px */
Remember TRBL (trouble) - Top, Right, Bottom, Left - clockwise like a clock!
Individual Properties
/* Margin */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
/* Padding */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
/* Border */
border-top: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;
Real Examples from the Project
.header__container {
max-width: var(--container-max-width); /* 1200px */
margin: 0 auto; /* Centers horizontally */
padding: var(--spacing-md) var(--spacing-lg);
/* 16px top/bottom, 24px left/right */
}
Product Card
.product-card__content {
padding: var(--spacing-md); /* 16px all around */
}
.product-card__category {
padding: var(--spacing-xs) var(--spacing-sm);
/* 4px top/bottom, 8px left/right */
margin-bottom: var(--spacing-sm); /* 8px below */
}
.hero__cta {
padding: var(--spacing-md) var(--spacing-xl);
/* 16px top/bottom, 32px left/right */
/* Creates a nice clickable area */
}
Centering with Margin Auto
margin: auto centers block elements horizontally.
/* Center a container */
.container {
max-width: 1200px;
margin: 0 auto;
/* 0 top/bottom, auto left/right */
}
margin: auto only works for horizontal centering of block elements with a set width.
Collapsing Margins
Vertical margins between elements can collapse (merge).
.box1 {
margin-bottom: 20px;
}
.box2 {
margin-top: 30px;
}
/* Actual space between: 30px (not 50px!) */
/* The larger margin wins */
Negative Margins
You can use negative values to pull elements closer or overlap.
.overlap {
margin-top: -20px; /* Pulls element up 20px */
}
Use negative margins sparingly - they can make layouts harder to understand.
Border Properties
Border Shorthand
border: width style color;
border: 2px solid var(--color-gray-300);
Border Styles
border-style: solid; /* ──── */
border-style: dashed; /* ┄┄┄┄ */
border-style: dotted; /* ···· */
border-style: double; /* ════ */
border-style: groove; /* 3D groove */
border-style: ridge; /* 3D ridge */
border-style: inset; /* 3D inset */
border-style: outset; /* 3D outset */
border-style: none; /* No border */
Border Radius
From the project variables:
:root {
--border-radius-sm: 4px;
--border-radius-md: 8px;
--border-radius-lg: 16px;
--border-radius-full: 9999px; /* Perfect circle/pill */
}
/* Usage */
.button {
border-radius: var(--border-radius-sm);
}
.badge {
border-radius: var(--border-radius-full); /* Pill shape */
}
Overflow Property
Controls what happens when content is too large.
overflow: visible; /* Default - content spills out */
overflow: hidden; /* Clips content */
overflow: scroll; /* Always shows scrollbar */
overflow: auto; /* Scrollbar only when needed */
Example: Rounded Images
.product-card {
border-radius: var(--border-radius-md);
overflow: hidden; /* Image respects parent's border-radius */
}
.header__categories-list {
overflow-x: auto; /* Horizontal scroll when needed */
/* Hide scrollbar but keep functionality */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
}
.header__categories-list::-webkit-scrollbar {
display: none; /* Chrome/Safari */
}
Spacing Scale
From the project - consistent spacing using an 8px scale:
:root {
--spacing-xs: 0.25rem; /* 4px */
--spacing-sm: 0.5rem; /* 8px */
--spacing-md: 1rem; /* 16px */
--spacing-lg: 1.5rem; /* 24px */
--spacing-xl: 2rem; /* 32px */
--spacing-2xl: 3rem; /* 48px */
}
Using a consistent spacing scale (multiples of 4 or 8) creates visual rhythm and makes designs feel more cohesive.
Visual Debugging
Add outlines to see the box model:
/* Temporary debugging */
* {
outline: 1px solid red !important;
}
/* See specific element */
.debug {
outline: 2px solid lime;
}
Practice Example
Complete card with proper spacing:
.card {
/* Content sizing */
width: 300px;
/* Box model */
padding: var(--spacing-lg); /* 24px inside */
border: 1px solid var(--color-gray-200);
border-radius: var(--border-radius-md);
margin-bottom: var(--spacing-xl); /* 32px between cards */
/* Modern box sizing */
box-sizing: border-box;
/* Total width = exactly 300px (includes padding + border) */
}
Next Steps
Flexbox
Learn one-dimensional layouts
Grid
Master two-dimensional layouts
