H153 - Practice Quiz Week 4

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

    line-height defines the height of the inline box.

  2. 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 font-size and line-height is divided in half and then applied to the top and bottom of the element. So, in the example, the difference is 6px, so 3px is applied to the top and 3px is applied to the bottom of each line in the paragraph.

  3. 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.)

    22px

  4. 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?

    22px

    17px

  5. 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?

    26px

    20px

Jennifer Griner