margin vs padding — the box model
margin is OUTSIDE the border (space between elements). padding is INSIDE the border (space between border and content).
style.css
v3.1
style.css — the CSS rules
index.html — the HTML structure (what the CSS targets)
Live preview
updates as you type
🧠 How it works
Every HTML element is a box with 4 layers (outside-in): margin, border, padding, content. margin: space between this box and other boxes. padding: space between the border and the content. background fills the padding area too — so larger padding = bigger colored area. margin is transparent; padding takes the background color.
✏️ Try these changes
-
Change margin: 20px to margin: 50px→ more space around the card -
Change padding: 20px to padding: 50px→ card grows, content has more breathing room -
Change margin to 0px→ card touches the surrounding content -
Use margin: 20px 50px (2 values)→ 20px top/bottom, 50px left/right -
Use margin: 10px 20px 30px 40px (4 values)→ top right bottom left (clockwise)