Outer Margins & Auto Center
What is Margin?
Imagine you are parking cars in a parking lot. If you park the cars bumper-to-bumper, drivers won't be able to open their doors or leave their spaces. To prevent collisions and allow people to walk, you leave empty buffer spaces between the cars.In CSS, Margin is this external buffer space. It is the spacing *outside* of an element's border. While padding pushes content *inward*, margin pushes neighboring elements *away*, creating space between different cards, sections, or paragraphs on your page.
Why does it matter?
Without margins, elements would collapse against each other in one giant clump. Margins are essential for separating headers from paragraphs, spacing out grid items, and centering layouts on desktop screens.Syntax Breakdown
margin: 20px; — Adds 20px buffer to all four outer sides.margin: 0 auto; — The first value (0) sets top/bottom margins to zero. The second value (auto) tells the browser to automatically divide the remaining horizontal space equally between the left and right margins, centering the block element inside its parent container. Note: Centering with auto only works if the element has a defined width smaller than its parent container!Common Mistakes
<span> or <a>) do not respect margin: 0 auto;. You must convert them to block or inline-block first!Quick Reference
margin — Sets spacing outside borders.margin: 0 auto — Centers a block element horizontally if it has a width set.Your Task
Set the `margin` property on the `.container` class to `0 auto` to center the block element.
index.html
Type code above to start the lesson.
Live Preview