CSS Tutorial
CSS Margins
Margin is space outside the border. Adjacent vertical margins collapse into the larger one.
Space outside the border
Margin is the gap between this box and its neighbors. It sits outside the border. A background does not fill the margin — you see whatever is behind the element, usually the page.
Use margin to separate cards, to drop a heading away from the banner, or to center a block. Use padding (next chapter) when you want space inside the border, around the words.
Four sides
margin-top, margin-right, margin-bottom, andmargin-left set each edge. Lengths such as 1rem and 24px work.0 removes the gap. Negative values pull boxes together; skip those until you can see the box model clearly.
Example
<style>
h1 {
color: teal;
margin-bottom: 0.35rem;
}
.card {
background: #e0f2fe;
border: 2px solid #0284c7;
padding: 0.5rem 0.75rem;
margin-top: 1rem;
margin-right: 0;
margin-bottom: 1rem;
margin-left: 1.5rem;
color: #0c4a6e;
}
p {
color: #475569;
}
</style>
<h1>Harbor studio</h1>
<p>Open 8–16.</p>
<p class="card">The card sits down and to the right of the hours line.</p>Shorthand
margin can set one, two, three, or four values. One value hits every side. Two values are top/bottom then left/right. Four values walk clockwise from the top: top, right, bottom, left.
| Written | Means |
|---|---|
margin: 1rem; | All four sides 1rem |
margin: 1rem 2rem; | Top and bottom 1rem; left and right 2rem |
margin: 0.5rem 1rem 1.5rem; | Top, left/right, bottom |
margin: 0.5rem 1rem 1.5rem 2rem; | Top, right, bottom, left |
Example
<style>
h1 {
color: teal;
margin: 0 0 0.5rem;
}
.card {
background: #f0f9ff;
border: 2px solid teal;
padding: 0.5rem 0.75rem;
margin: 1rem 0;
color: #0c4a6e;
}
p {
color: #475569;
margin: 0.4rem 0;
}
</style>
<h1>Harbor studio</h1>
<p>Open 8–16.</p>
<p class="card">Vertical margin only — the card is full width.</p>margin: auto
On a block with a width smaller than its parent, margin-left: auto andmargin-right: auto share the leftover space. That centers the box horizontally. The shorthand margin: 0 auto; is the usual writing: no extra top/bottom, auto on the sides.
Example
<style>
h1 {
color: teal;
text-align: center;
}
.card {
width: 12rem;
margin: 0 auto;
background: #0284c7;
color: #fff;
padding: 0.75rem 1rem;
}
p {
color: #475569;
}
</style>
<h1>Harbor studio</h1>
<p class="card">Open 8–16.</p>
<p>The hours card is 12rem wide and centered with margin auto.</p>Click Try it in CSS and change width to 8rem. The card stays centered. That preview is /css/try.
Auto on top and bottom does not center a block in the viewport. Vertical centering is a flex or grid job, covered later.
Vertical margins collapse
When two vertical margins touch, they do not add. The gap becomes the larger of the two. A heading withmargin-bottom: 24px above a paragraph with margin-top: 16px leaves 24px, not 40px. Horizontal margins do not collapse.
Example
<style>
h1 {
color: teal;
margin: 0 0 8px;
}
.slot {
background: #e0f2fe;
color: #0c4a6e;
padding: 0.4rem 0.6rem;
margin-top: 24px;
margin-bottom: 24px;
}
p {
color: #475569;
}
</style>
<h1>Harbor studio</h1>
<div class="slot">First sitting</div>
<div class="slot">Second sitting</div>
<p>Open 8–16. The gap between sittings is 24px, not 48px.</p>Collapse is why stacking two “24px gaps” can look half as roomy as you planned. Padding does not collapse — that is the next chapter. Parent and first-child vertical margins can collapse too, which is why a wrapper sometimes does not show the top margin you set on the heading inside it.
What to remember
- Margin is outside the border and has no background
- Shorthand walks clockwise from the top
margin: 0 autocenters a sized block- Touching vertical margins collapse to the larger one
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
Space outside a formula card
Margin is outside the border. Vertical margins collapse: two 24 px margins stacked become 24 px, not 48. That surprise is why cards sometimes look glued.
margin: 0 auto centres a block that has a width. It does not centre inline text — that is text-align.
A = 12 m²
Example
<style>
.card { width: 180px; margin: 1rem auto; background: #e0e7ff; padding: 0.6rem; }
</style>
<div class="card">4 m × 3 m = 12 m²</div>Physics
Keep two readings apart
margin-bottom on each reading is the gap in a log. Padding would paint the gap with the card colour. Margin leaves the page background showing.
Example
<style>
.row { margin: 0 0 0.8rem; background: #e0f2fe; padding: 0.4rem; }
</style>
<p class="row">t = 1 s</p>
<p class="row">t = 2 s</p>