Now that you know the box model, let us control it precisely. Spacing and borders are where pages start to feel polished — and CSS shorthand makes it fast.
Shorthand values
Padding and margin accept one to four values. One value applies to all sides; two values are vertical then horizontal; four values go clockwise from the top: top, right, bottom, left.
| Shorthand | Means |
|---|---|
| padding: 16px | All four sides 16px |
| padding: 10px 20px | Top/bottom 10, left/right 20 |
| padding: 5px 10px 15px 20px | Top, right, bottom, left |
| margin: 0 auto | Vertical 0, horizontal auto (centres) |
<div class="a">16 all round</div>
<div class="b">10 / 20</div>.a{background:#eee;padding:16px;margin-bottom:10px}
.b{background:#ddd;padding:10px 20px}Borders and rounded corners
A border takes a width, style and colour: <code>border: 2px solid #333</code>. Round corners with <code>border-radius</code> — a large value like <code>999px</code> makes pills and circles.
<div class="card">Rounded card</div>.card{border:2px solid #2563eb;border-radius:14px;padding:20px;background:#fff}Centering with margin auto
A classic trick: give a block element a width and <code>margin: 0 auto</code> to centre it horizontally. The auto margins split the leftover space evenly.
<div class="wrap">Centered</div>.wrap{width:200px;margin:0 auto;background:#dbeafe;padding:16px;text-align:center}/* expecting 40px gap */
.a{margin-bottom:20px}
.b{margin-top:20px}/* gap is 20px (collapsed), not 40px */
/* set spacing on one side to be predictable */
.a{margin-bottom:20px}Margins between stacked elements collapse into the larger of the two, which surprises beginners. It is normal — design with it, not against it.
Be consistent with a spacing scale (e.g. 4, 8, 16, 24, 32px). Random values like 13px or 27px make a layout feel unstructured.
Build a centered card (width + margin: 0 auto) with padding, a border and rounded corners. Then space two cards apart using a consistent margin.
1. What does "margin: 10px 20px" mean?
2. Which centres a fixed-width block horizontally?
3. What rounds corners?
- Padding/margin shorthand: 1 = all, 2 = vertical/horizontal, 4 = clockwise.
- border takes width, style and colour; border-radius rounds corners.
- margin: 0 auto centres a fixed-width block horizontally.
- Use a consistent spacing scale.