Let's examine another case study. This time, suppose you're trying to make the following weather forecast cards, which have been mocked up by a graphic designer at your company:
You are given this HTML to start with, whose default rendering is far from your goal:
The cards currently fill the page. A reasonable first step is make each one smaller. You start by setting the width:
The sizes are improved, but the cards are still block elements. You want them to appear on the same line, so you switch them to inline-block:
If the cards don't appear on the same line, try zooming out in your browser until they do.
Your browser may have a large default margin for figure elements. You want to provide a uniform amount of spacing across browsers, so you explicitly set this margin:
The font used in the mockup didn't have serifs, so you change the font family on for figures. This property is inherited by all children:
Next you apply a background color to each card:
Whoops. The images are no longer visible because the colors are the same. You happen to know that these images have a transparent background, so you can fix this by adding a background color to the image elements themselves. If you use img as your selector, you will set the background color of all images across the entire page, which will be bad when you start to add other content. You'd like to narrow your target to just the images inside these cards, which you can achieve by using a direct descendent selector:
The selector figure > img targets each image element that is an immediate child of a figure element.
The content runs right up to the edge of the cards. You fix this by adding some padding:
The foreground content of the images runs right up to the edge of their boxes, so you decide to add some padding to these too:
The images should fill the complete width of the cards, whatever size the cards happen to be, so you set their width to 100%:
The images overflowed their parent. That's because the width doesn't currently take into account the padding you added. Adjusting box-sizing helps:
You're getting closer. When you zoom out to make them all appear on the same line, you see that the boxes are all aligned at the bottom. You want them aligned at the top. To place an inline element at the top of its line, you use the vertical-align property:
The images have different heights. You decide to make these uniform by setting their heights to a fixed value:
For pixel images, setting both the width and height leads to distortion. But these are vector images. They don't get distorted.
The headings have too much space around them, and they need to be centered. Perhaps margin can fix both of these problems?
The excess spacing is gone, but the centering didn't work. You remember that the auto margin trick only works for a block element whose width is not auto. You don't really know what the width should be because the headings may vary in size, so you dismiss auto as a solution.
You discover the poorly named text-align property, which tells a parent element that its inline children, text or otherwise, should be centered:
Finally, you add a little margin above and below the images and round the corners of the cards:
You and the graphic designer give each other high fives.