Spacing and alignment
Add spacing with margin and padding, and align content.
Spacing and alignment
In this lesson you'll set the outer space, inner space, and alignment of paragraphs. margin sets space outside the element border, padding sets space inside it. text-align aligns text horizontally.
The two-value shorthand is common: margin: 12px 0 sets vertical and horizontal space separately. text-align: left aligns text left, center centers it, right aligns it right. These three properties make the page breathe and look tidy.
Box model: margin vs padding
Every HTML element is treated as a box. margin controls space outside the box, padding controls space between the content and the border. Both make the page breathe but in different places.
Example: p { margin: 12px 0; padding: 0 16px; }. This rule leaves 12 pixels above and below each paragraph, and gives inner space on the left and right. The result: paragraphs don't stick together and don't touch the line edges.
Exercise Add the p rule
Take the file from the previous lesson (header comment + body and h1 rules). Below it, add a p type selector rule with these declarations: margin: 12px 0, padding: 0 16px, text-align: left. End each declaration with a semicolon.
Show example solution
/* Personal Site stylesheet */
body {
margin: 0;
}
h1 {
color: #2a3d66;
font-family: Georgia, serif;
font-size: 2rem;
}
p {
margin: 12px 0;
padding: 0 16px;
text-align: left;
}Test yourself
-
What does body { margin: 0; } do?
body { margin: 0; }- Changes the background color
- Sets the typeface
- Centers the text
- Resets the browser's default outer spacing
Show answer
Resets the browser's default outer spacing — Correct. margin: 0 removes body's default outer space; content reaches the browser edge.
-
Complete the paragraph alignment
p { text-align: ____; }Show answer
p { text-align: left; } -
Match each property to its meaning
- margin
- outer space
- padding
- inner space
- text-align
- horizontal alignment
- color
- text color