H153 - Exam Week 4

  1. What is the difference between the height of the em-box and the height of the content-area for a non-replaced element? [10 points]

    There is no difference in height between the em-box and the content area.
    Source: http://www.d.umn.edu/~lcarlson/csswork/inline/embox.html

  2. How is half-leading determined in CSS, and what does its application determine? Be as detailed as possible. [15 points]

    Half-leading is determined by first determining the difference between the line-height and the font-size. This amount is halved (call it x). If the line-height is larger than the font-size, x is applied to both the top and the bottom of the line to create the line box. If the font-size is larger than the line-height, then x is subtracted from the top and the bottom of the content area to create the line-box. This tells the user agent how far apart to space lines within an element.

  3. Consider the following styles and markup:

    p#q45 {font-size: 20px; line-height: 30px;}
    sup {font-size: 16px; line-height: 75%; vertical-align: 50%;}

    <p id="q45">That's quite a car<sup>[1]</sup> you have there.</p>

    Assuming that one-quarter of each character box is below the baseline, answer the following [5 points each]:
    1. What is the height of the sup element's content-area?

      16px

    2. What is the height of the sup element's inline box?

      12px

    3. How far will the sup element be raised?

      6px

    4. What is the height of the line box for this line?

      30px

  4. I am having problems with this webpage. There's an unwanted gap between the header pic and the navigation. Can you explain why this gap is there in the first-place? Write a set of rules that gets rid of the gap (you can name some alternate solutions as well). [15 points]

    Even though there is no text, the image is aligned to the baseline, which is not the very bottom of the line box.

    The easiest alternate solution is to change the doctype to Transitional. ;)
    #headmast img {vertical-align: bottom;}

Jennifer Griner