Styla saysmargin is the transparent space outside an element, pushing neighbors away.
margin creates space around a box. Shorthand takes 1-4 values (all; vertical/horizontal; top/horizontal/bottom; or top/right/bottom/left). margin: 0 auto horizontally centers a block with a set width. Margins are transparent — they show the parent's background.
Power-ups you unlock
margin = outer, transparent spacing
1-4 value shorthand (clockwise from top)
margin: 0 auto centers a fixed-width block
Margins collapse vertically (next lesson)
The Specificity Sphinx attacks — common mistakes
Using margin for inner spacing (that is padding)
Expecting auto to center without a width
Surprises from vertical margin collapse
Boss battleCenter a fixed-width box with margin auto and give it different top vs side margins.
Example code
<!doctype html><html><head><meta charset="utf-8">
<style>.b{width:200px;margin:24px auto;background:#140a28;color:#e6e0ff;padding:14px}</style></head><body style="background:#06040d"><div class="b">centered with margin auto</div></body></html>