CSS Tutorial
CSS Box Model
Every element is a box: content, padding, border, then margin. Painted width is content plus padding plus border unless you switch to border-box.
Every element is a box
Headings, paragraphs, buttons, and images all paint as rectangles. CSS calls that rectangle abox. You do not draw the box yourself. You set four layers around the content, and the browser stacks them from the inside out.
| Layer | Where it sits | What it is for |
|---|---|---|
| Content | Innermost | Text, images, child boxes |
| Padding | Around content | Inner space; same background as the content |
| Border | Around padding | A visible edge |
| Margin | Outside the border | Gap between this box and the next |
Layout is counting those layers. When two Harbor studio cards sit too close, you usually need margin. When the label feels glued to the border, you need padding.
See the layers
Background color fills the content and the padding. The border sits on top of that fill. Margin is empty — you see whatever is behind the element, often the page background.
Example
<style>
body {
background: #f0f9ff;
}
.slip {
width: 240px;
padding: 24px;
border: 8px solid teal;
margin: 24px;
background: #ccfbf1;
color: #115e59;
}
</style>
<article class="slip">Harbor studio booking slip</article>In /css/try, bump padding and margin one at a time. Padding grows the teal fill. Margin pushes the slip away from the edges without painting a color.
How the browser counts width
Default box-sizing is content-box. Total painted width is content width plus left and right padding plus left and right border. Margin is extra space around that painted width; it is not part of the background.
For a slip with width: 240px, padding: 24px, and border: 8px(content-box):
painted width = 240 + 24 + 24 + 8 + 8 = 304px
- Content: 240px
- Padding: 24 + 24 = 48px
- Border: 8 + 8 = 16px
- Painted width: 304px
- Then margin sits outside that
Example
<style>
.row {
background: #e0f2fe;
padding: 8px;
}
.tile {
width: 120px;
padding: 16px;
border: 4px solid #0284c7;
margin: 8px;
background: white;
color: #0c4a6e;
}
</style>
<div class="row">
<div class="tile">120px content</div>
<div class="tile">Still 120px content</div>
</div>Each tile’s content is 120 pixels, but the painted box is wider. Two tiles in a 300-pixel row can wrap even though 120 + 120 looks like it should fit.
border-box makes the number honest
box-sizing: border-box folds padding and border into width andheight. A 240-pixel card stays 240 pixels wide on the outside. Content shrinks to leave room for padding and border. That is the usual choice for layout.
Example
<style>
.honest {
box-sizing: border-box;
width: 240px;
padding: 24px;
border: 8px solid teal;
background: #e0f2fe;
color: #0c4a6e;
}
</style>
<article class="honest">
Harbor studio — this box is 240px including padding and border.
</article>A common reset is *, *::before, *::after { box-sizing: border-box; }. The box-sizing chapter covers that pattern in full.
Margin is outside, and vertical margins can collapse
Adjacent vertical margins do not always add. Two paragraphs with margin-bottom: 16px andmargin-top: 16px often share a single 16-pixel gap, not 32. That ismargin collapse. Padding and border do not collapse.
Example
<style>
.hour {
margin: 16px 0;
padding: 8px 12px;
background: #ccfbf1;
color: #115e59;
border-left: 4px solid teal;
}
</style>
<p class="hour">08:00 kiln warm-up</p>
<p class="hour">10:00 Harbor studio open</p>
<p class="hour">16:00 last firing</p>If you need a guaranteed gap that never collapses, use padding on a parent, orgap on a flex or grid container. Do not fight collapse with random extra margins.
Inspect, then count
Browser developer tools draw the box model as nested rectangles. Click an element and read content, padding, border, and margin as numbers. That diagram is the same model this chapter describes.
Next: outline. Outline looks like a border but sits outside it and does not add to the width you just learned to count.
Worked examples
The short listings above show one property. These sheets paint documents you would actually ship: a lab dashboard, a clinic form, a marks table, a nav bar.
CSS does not invent meaning. HTML already said what the pieces are. Cascade, specificity, and the box model decide how they look. The numbers are classroom values — current, pH, pulse, 3-4-5 — so the style has something real to sit on.
Preview them in the CSS editor at /css/try. Change one property and watch the page paint. The tags stay the same.
Maths
Count the painted width
Under content-box, painted width is content + padding-left + padding-right + border-left + border-right. Margin sits outside and is not painted.
Here: 140 + 24 + 24 + 8 + 8 = 204 px of paint. The 24 px margin is extra gap, not part of that 204.
painted = width + padding_x + border_x
Example
<style>
.box {
width: 140px;
padding: 24px;
border: 8px solid #0f766e;
margin: 16px;
background: #ccfbf1;
}
</style>
<div class="box">Content</div>Engineering
A booking slip with visible layers
Background fills content and padding. Border rides the edge. Margin is the desk showing around the slip. Bump padding and the teal grows; bump margin and the slip moves.
Example
<style>
body { background: #f0f9ff; }
.slip {
width: 200px;
padding: 16px;
border: 6px solid teal;
margin: 20px;
background: #99f6e4;
}
</style>
<article class="slip">Workshop booking · bay 4</article>