Week 4 Practice Quiz

What exactly does line-height define? (Note: despite its name, it does not define the height of a line.)

The value of line-height defines the size of the inline box for a given elements (or, more precisely, its constituent characters). The difference between the values of line-height and font-size for a given element define the leading, which is split in half and applied equally to the top and bottom edges of the element's content-area. The resulting box-- whether taller, shorter, or exactly the same as the content-area-- is the inline box.
Explain how the difference in the values of line-height and font-size affect the height of a line. As a concrete example, assume that a paragraph has the following styles:
```
font-size: 14px; line-height: 20px;
```
The difference between the font-size and line-height defined the leading of a line. This difference is split in two, and half-leading is applied to the top and bottom of the content area to generate the inline box for an element. In the given example, the height of the inline box for text of the given element will be 20px tall. This means the line box has to be at least that tall, and possibly taller (if there are other elements in the same line that have inline boxes that are higher or lower than this one). Three pixels of half-leading are applied to the top of the 14-pixel tall content area, and 3 pixels of half-leading are applied to its bottom. Thus the inline box is 20 pixels tall.
Assume a paragraph whose font-size is 10px, with eight pixels of space above the baseline and two below. If an image 20 pixels tall is placed on the baseline of a line of text, how tall will the line box be in total? (Assume the image is the tallest element in the line.)

The line box will be 22 pixels tall: 20px for the image's inline box and 2px below the baseline. Remember that by default the bottom edge of an image rests on the baseline of the line in which is exists.
As a variation on the previous example, assume the image has a top margin of -5px. How tall will the line box be in this case?

The line box will be 17 pixels tall: 20px for the image, -5px of top margin (which make the image's inline box 15px tall), and 2px below the baseline.
Building from the previous example, assume the image has a padding of 3px and a one-pixel blue border, and a top margin of -10px. How tall will the line box be?

The line box will be 20 pixels tall: 20px for the image, 6px of padding, 2px of border, and -10px of top margin, and then 2px below the baseline.

Bonus question (only tackle this if the rest seemed easy): take the situation from question 5 and change the image's margin so that it is -10px all the way around (.e.g, margin: -10px). How tall will the line box be? Where will the bottom edge of the image's content be placed?

The specification isn't clear about this. There are two possible answers:
1. The line box will be 10 pixels tall. The image's content-area is, in total, 28px tall once the top and bottom borders and padding are added up. The bottom edge of the image is 6 pixels below the baseline (and the bottom border edge is 10px below it) because the bottom edge of the inline box is aligned with the baseline. The inline box of the image is only 8px tall (28px tall content-area minus 20px of margins), and being shorter than the surrounding text in the line, it doesn't change the height of the height of the line box. (NS6.1 does this.)
2. The line box will be 20 pixels tall. The bottom edge of the image will be on the baseline, as baseline-alignment refers to the content-area, not the inline box. Subtracting the 10 pixels from the top of the image gives us 18 pixels above the baseine, and two below it. (IE5/Mac does this.)
Neither of these is (yet) definitively right or wrong, because all CSS2 says is that "if the box doesn't have a baseline, align the bottom of the both with the parent's baseline." What it doesn't say is whether "the box" refers to the inline box, or the box defined by the content-area.