WDD8 - CSS: margins and padding
- I can use the margin and padding shorthand properties to set spacing on one, two, three or four sides of a box.
- I can explain margin collapse and predict the visible gap between two stacked block elements.
- I can centre a block element horizontally using a fixed width and margin: auto.
- I can read a 1, 2, 3 or 4-value shorthand and state which side each value applies to.
- I can calculate the visible gap between two stacked boxes given both of their vertical margins.
- I can identify why a margin: auto centring rule has failed to work, and fix it.
WDD8 builds directly on WDD7's box model - today adds the detail WDD7 left out.
Key vocabulary
Margin and padding shorthand
Two properties, one shorthand pattern
WDD7 introduced padding and margin as two of the box model's four layers - padding inside the border, sharing the box's background; margin outside the border, always transparent. Both properties accept the same shorthand patterns, so learning the pattern once covers both. Writing four separate declarations such as margin-top, margin-right, margin-bottom and margin-left works, but a single shorthand line is quicker to write and quicker to read.
How many values, and what each one means
A shorthand declaration can take one, two, three or four values, and CSS decides what each value means purely from how many are given - not from any label. With one value, that value applies to all four sides equally. With two values, the first sets top and bottom together, and the second sets left and right together. With three values, the first sets top, the second sets left and right together, and the third sets bottom. With four values, they apply clockwise starting from the top: top, right, bottom, left - the same order for both margin and padding, and worth memorising as a fixed sequence rather than re-deriving it each time.
padding: 12px;
All four sides: 12px.
padding: 10px 20px;
Top/bottom: 10px. Left/right: 20px.
padding: 5px 10px 15px;
Top: 5px. Left/right: 10px. Bottom: 15px.
padding: 8px 20px 12px 4px;
Top: 8px. Right: 20px. Bottom: 12px. Left: 4px.
Margin collapse
Vertical margins behave differently from horizontal ones
Padding never collapses, and margins never collapse horizontally - if one box has margin-right: 10px and the next box has margin-left: 6px, the total horizontal gap between them is the full 16px, exactly what adding the two values suggests. Vertical margins between stacked block elements behave completely differently. When the bottom margin of one block element meets the top margin of the block element directly below it in normal flow, the two margins collapse into a single gap equal to the larger of the two values - not their sum. A box with margin-bottom: 30px sitting above a box with margin-top: 20px produces a visible gap of 30px, not 50px.
Why this exists
Margin collapse exists so that a page built from many stacked elements, each with its own top and bottom spacing set independently, does not end up with doubled gaps everywhere two of them happen to meet. It only applies to vertical margins, only between block-level elements in normal flow stacked directly above and below each other, and never to padding, which is why the SQA specification names margin collapse as its own distinct behaviour rather than treating margin and padding as interchangeable.
margin-bottom: 30px; / margin-top: 20px;
Centring with margin: auto
Auto needs two things to work
Setting margin: auto (or just the two horizontal sides, margin: 0 auto;) tells the browser to work out the left and right margin values itself, splitting whatever horizontal space is left over equally between both sides. This only works under two conditions: the element must be a block-level element, and it must have an explicit width set that is narrower than its container. Without a fixed width, a block element already stretches to fill all the available width by default, leaving no leftover space for auto margins to distribute - the rule has nothing to do, so nothing visibly centres.
Worked examples
.card {
padding: 8px 20px 12px 4px;
}8px, right = 20px, bottom = 12px, left = 4px..box-a { margin-bottom: 30px; }
.box-b { margin-top: 20px; }
<!-- box-b sits directly below box-a in normal flow -->margin: 0 auto;
Fails. The box already fills the container's full width, so there is no leftover space to split.
width: 300px;
margin: 0 auto;
Works. The browser splits the remaining horizontal space evenly on both sides.
width narrower than the container is what gives margin: auto space to distribute - without it, there is nothing for auto to calculate.Box P has margin-bottom: 24px. Box Q sits directly below it in normal flow with margin-top: 16px. What is the visible vertical gap between them?
Both margins are vertical, between stacked block elements in normal flow, so they collapse to the larger value.
Compare 24px and 16px → larger is 24px.
Visible gap: 24px (not 40px).
Practical: margin collapse and centring, WebStorm
Download the starter file below and open it in WebStorm. It has a banner div and two stacked card divs with no CSS at all yet.
Download WDD8_starter.html- Add an internal stylesheet inside
<head>. - Give
.card-aamargin-bottomof40pxand.card-bamargin-topof15px. - Save and open in a browser. Measure the gap between the cards - is it 55px or 40px? Compare against the margin collapse rule above.
- Give
.bannerawidthof320pxandmargin: 0 auto;to centre it horizontally. - Save again and check the banner sits centred with equal space either side.
- Assuming vertical margins between stacked elements always add together. Adjacent vertical margins between block elements in normal flow collapse to the larger value, not the sum.
- Assuming horizontal margins collapse too. They never do - left and right margins between boxes sitting side by side always add together in full.
- Losing track of shorthand order. Four values go clockwise from the top (top, right, bottom, left) - mixing this up with a 2 or 3-value pattern gives the wrong side entirely.
- Trying to centre a block element with margin: auto without giving it a width. Without a fixed width narrower than its container, the element already fills all available space, so there is no leftover space for auto to distribute.
Name margin collapse by that exact term when explaining it - "the margins add up" is the wrong description and will not gain the mark. State clearly that it only applies to vertical margins between block elements in normal flow, and that the result is the larger of the two values, never the sum. Padding never collapses under any circumstances - if a question compares margin and padding behaviour, that is a safe, always-true distinguishing fact to use.
Task Set A - Core questions
padding: 10px 15px; (a 2-value shorthand), what is the padding at the top of the box? Include the unit.padding: 5px 10px 15px; (a 3-value shorthand), which sides get 10px?margin: auto; on a div, expecting it to centre horizontally, but the div does not move. Explain why, and what needs to be added to fix it..banner on the page, but nothing happens. Find the bug and write the corrected CSS..banner {
margin: 0 auto;
background: #E6F1FB;
}.banner {
width: 320px;
margin: 0 auto;
background: #E6F1FB;
}Without a width, .banner already fills the full container width, leaving nothing for the auto margins to distribute. Adding a fixed width narrower than the container gives margin: auto actual space to centre it in.
Task Set B - Extension
padding: 20px 0; on a container, expecting this to add 20px of padding only above and below the content, with none on the sides. Is this correct? Explain what the 2-value shorthand actually sets.File this in OneNote under:
Higher Computing Science > Web Design & Development > WDD8
Timing: this lesson's content is scoped for a single period but lands on a double (Thu 26 Nov 2026, per WDD.md §2a/§4) - the opposite mismatch from WDD7, so there is spare time rather than a shortfall. Core pace through Task Set A should take roughly one period: 6 min warm up, 10 min shorthand notes + Example 1, 12 min margin collapse notes + context box + Example 2, 8 min centring notes + Example 3, remaining time on Task Set A. Use the second period for the full WebStorm practical in class (rather than pushing it to homework as WDD7 had to), plus Task Set B, and consider pulling forward some WDD9 warm-up material if the class finishes early.
Scope control: deliberately does not cover negative margins, percentage-based margins/padding, or vertical centring with margin: auto (vertical auto-centring does not work the same way without extra positioning context, which is out of scope) - keep to horizontal centring only, matching the SQA spec's box-model-adjacent property list.
Margin collapse is the single highest-value fact in this lesson for exam purposes - it is specific, testable, and easy to get wrong if a pupil answers from general intuition ("things add up") rather than the actual rule. A7/A8/B1 exist specifically to test this from three different angles: written explanation, numeric calculation, and code debugging.
Starter file provided (WDD8_starter.html) rather than a from-scratch build, continuing the alternation between starter-file and from-scratch practicals across WDD6/WDD7/WDD8.