Several Values at Once
Writing every side separately takes a lot of code. That's why padding and margin can take up to four values:
- One value sets all four sides:
padding: 10px. - Two values: the first one is for the top and bottom, the second one for the left and right:
padding: 10px 20px. - Four values go clockwise from the top: top, right, bottom, left. For example,
margin: 0 0 10px 0sets a 10-pixel margin at the bottom and zero on the other sides. If it helps, remember the word TRouBLe: Top, Right, Bottom, Left.
(You may also come across three values: the top, then the left and right, and then the bottom.)
There's one more thing to know about margins. When two cards with 20-pixel margins are above each other, you might expect a 40-pixel gap between them: 20 below the first one and 20 above the second one. But the vertical margins of neighboring elements overlap: the gap is as big as the larger of the two margins, here 20 pixels. This is called margin collapsing.
Instructions
In the rule for .title-background, replace the two declarations padding-top: 30px and padding-bottom: 30px with a single one: padding: 30px 20px. The padding stays 30 pixels at the top and bottom and is now also 20 pixels on the left and right, so that the heading doesn't touch the edges of a narrow screen.
In the rule for .group, #breeds, replace margin-top: 20px with margin: 20px 0. The cards now also have a margin below them, so there's space under the last one, but the gap between two cards stays 20 pixels.
The headings in the cards have a big space above them: the padding of the card plus the default top margin of the heading. In the rule for h2, add margin: 0 0 10px 0. This removes the top margin and leaves a 10-pixel gap below the heading.
Start programming for free
9/12