JavaScript Curriculum
The Box Model
easyYour coffee shop cards look cramped — text touching the border, cards touching each other. The fix is one concept: the box model. Once you see it, you can't unsee it.
The Box Model
Every single element on a webpage — every <p>, every <div>, every <button> — is a rectangular box. Understanding this box, and how it's measured, unlocks all of CSS layout.
The Four Layers
A CSS box has four layers from outside in:
.box {
width: 120px; /* content width */
margin: 24px;
border: 4px solid #333;
padding: 16px;
/* total rendered width: 160px */
}box-sizing — The Most Important Reset
By default, CSS uses box-sizing: content-box — which means width only applies to the content area. Padding and border get added on top. This makes width calculations painful.
The fix: box-sizing: border-box — makes width include padding and border. The element stays exactly the size you declare.
width = content only. Padding + border added on top → element grows beyond 200px.
width = content + padding + border. Element stays exactly 200px wide — predictable.
Margin vs Padding — Know the Difference
The most common beginner confusion: when to use margin vs padding. One question settles it every time: is the space inside or outside the border?
You want space BETWEEN two cards in a list
Your Challenge
Apply the box model to the coffee shop page — add proper padding inside cards, margin between them, and set up the border-box reset.
Challenge
Style the .card element with: 24px padding, a 2px solid border, 16px margin-bottom, border-radius of 8px, and set box-sizing: border-box on * so widths are predictable. Then give the body a max-width of 720px centered with margin: 0 auto.
The Box Model
easyYour coffee shop cards look cramped — text touching the border, cards touching each other. The fix is one concept: the box model. Once you see it, you can't unsee it.
The Box Model
Every single element on a webpage — every <p>, every <div>, every <button> — is a rectangular box. Understanding this box, and how it's measured, unlocks all of CSS layout.
The Four Layers
A CSS box has four layers from outside in:
.box {
width: 120px; /* content width */
margin: 24px;
border: 4px solid #333;
padding: 16px;
/* total rendered width: 160px */
}box-sizing — The Most Important Reset
By default, CSS uses box-sizing: content-box — which means width only applies to the content area. Padding and border get added on top. This makes width calculations painful.
The fix: box-sizing: border-box — makes width include padding and border. The element stays exactly the size you declare.
width = content only. Padding + border added on top → element grows beyond 200px.
width = content + padding + border. Element stays exactly 200px wide — predictable.
Margin vs Padding — Know the Difference
The most common beginner confusion: when to use margin vs padding. One question settles it every time: is the space inside or outside the border?
You want space BETWEEN two cards in a list
Your Challenge
Apply the box model to the coffee shop page — add proper padding inside cards, margin between them, and set up the border-box reset.
Challenge
Style the .card element with: 24px padding, a 2px solid border, 16px margin-bottom, border-radius of 8px, and set box-sizing: border-box on * so widths are predictable. Then give the body a max-width of 720px centered with margin: 0 auto.