This site is designed for accessibility. Content is obtainable and functional to any browser or Internet device. This site's full visual experience is available in a graphical browser that supports web standards. Please consider upgrading your web browser.

Example 1

Calculating the Size of a Line Box

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">
Web pages created after January 1, 2002 must incorporate Web Accessibility Standards
<sup>[1]</sup>
you have there.
</p>

Assume that one-quarter of each character box is below the baseline.

a. Find the content area for each element.

Use the font size to find the initial content height (content area).

font-size = content area

Selector font-size initial content area
p#q45 20px 20px
sup 16px 16px

b. Find the value of each inline box.

The height of the inline box of a non-replaced element = line-height.

Difference in font-size and line-height = leading.

Divide leading by 2 = half-leading.

Add the value of the half-leading to the top and bottom of the content area to get the value of the inline box.

Selector inline box equals line-height minus font-size equals inline box leading half leading

line-height breakdown
p#q45

30px

 -20px 30px 10px 5px half-leading = 5px
font-size = 20px
half-leading = 5px
sup

12px
computed value[note]

line-height=75% of font-size=16px

 -16px 12px -4px -2px half-leading = -2px
12px
half-leading = -2px

[note] ...inline layout comes after inheritance...For a given element, the value of line-height is calculated, and that final computed value is propgrated down to the descendant elements. If those descendants don't have their own value of line-height, then they get the inherited computed value. If they do have their own value, then it goes into effect and the inherited value is thrown out. 15.5.1

However, "if an element does have a value set" (absolute or relative) "that value is calculated with respect to the 'font-size' of the element itself, not its parent".

The computed value of a line-hieght with a percentage value is the percentage multiplied by the element's font size. 10.8.1

c. Align all of the boxes according to their vertical-align property.

This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element. It applies only to inline elements, although that includes replaced elements such as images and form inputs. It is not inherited. Element content is typically vertically centered on a rendered line (with extra line-height amounts distributed equally on the top and bottom.) This property allows in-line content boxes to be vertically aligned with respect to several different criteria on a rendered line.

Although by default the text between the <sup> and </sup> element gets displayed one half character lower but in the same font size as the currrent text flow (Musciano & Kennedy "HTML & XHTML, The Definitive Guide", O'Reilly, 2000, p.87), in CSS "by default, vertical-align is set to baseline for all elements" (Eric A. Meyer " Vertical alignment of inline elements" General discussion post 15, April 10, 2002).

Assuming that one-quarter of each character box is below the baseline:

Selector inline box Percentage of inline box

Baseline division before vertical-alignment

 Vertical-align shift Baseline division
p#q45 30px 75% of 30px inline box above the baseline =22.5px +0 22.5px above the baseline
25% of 30px inline box below the baseline =-7.5px +0 7.5px below the baseline
sup 12px 75% of 12px inline box above the baseline =9px +6px
which is 50% of the inline box or line height		 +15px
above the baseline
25% of 12px box below the baseline =-3px +6px
which is 50% of the inline box or line height		 3px
below the baseline

d. Find the value of the line box.

The line-height is the distance between the uppermost box top and the lowermost box bottom.

The sup element has the uppermost box top at 26.5px above the baseline. p#q45 has the lowermost box bottom at 7.5px below the baseline. So the distance between the 2 values 26.5px + 7.5px = 34px.

Selector Baseline division Uppermost box top Lowermost box bottom Distance between the 2 values
p#q45 22.5px above the baseline 22.5px above the baseline  

22.5px + 7.5px = 30px
7.5px below the baseline   7.5px below the baseline
sup 15px above the baseline    
3px below the baseline