GoalTell padding from margin and read the rules for width, centring and borders.
New words
padding · space inside a box, between its content and its bordermargin · space outside a box, between it and other thingsborder · the line around a box, or one side of itwidth · how wide a box is; 80% means a share of the page width
Explanation
Every box has four layers, from the inside out: the content, the padding, the border and the margin. Padding is the space inside the box, between the content and the border. Margin is the space outside the box, between it and its neighbours. Do not mix them up. In our style file, the container has width: 80%, a share of the page width, and margin: auto, which gives equal space on both sides so the box sits in the centre. Each section has padding: 10px, a very small step on the screen, so text does not touch the edges. A sub-heading h2 has border-bottom, a line under it. A thick line under a sub-heading helps the eye to find a new part.
Read the picture. container: width 80% and margin auto, so the box is 80% wide and centred. section: padding 10px, so the words keep a little room from the edges. h2: border-bottom 3px solid darkblue, a dark blue line under the sub-heading.
Property
Where the space is
padding
inside the box
margin
outside the box
A student says “padding is the space between two boxes.” Her teacher corrects her: that is margin. Padding is the space inside a box, between the content and its border. A small drawing of a box in a box shows the difference.
Class activity
Draw a box inside a box on paper. Label the content, the padding, the border and the margin. Then write the three lines of CSS from the container rule, and say in your own words what each one does.
Practice
1
A box has a gap between its words and its border. Is that gap padding or margin?
Padding: it is inside the box, between the content and the border.
2
A box has a gap between its border and the next box. Is that gap padding or margin?
Margin: it is outside the box, between it and its neighbours.
3
What does margin: auto do for a box with a width?
It gives equal space on both sides, so the box sits in the centre.
