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 2

Calculating the Size of a Line Box

Consider the following styles and markup:

p#se4 {font-size: 10px; line-height: 120%;}
sub {font-size: 0.8em; vertical-align: -3px;}
img {margin-top: -2px; border: 2px solid black; width: 10px; height: 12px;}

<p id="se4">This is the symbol of the Murun
<sub>84</sub>
:<img src="murun84sym.gif">.
</p>

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

a. Find the content area for each element.

Non-replaced element

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

font-size = content area

Selector font-size initial content area
p#se4 10px 10px
sub 0.8em
8% of 10px		 8px

Replaced element

For replaced elements the intrinsic height of the element plus any margins, borders, or padding. = content area.

Selector margin-top border height initial content area
img -2px +4px 12px 14px

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
p#se4 120% of 10=12px
sub 12px inherited
The inherited value of line-height is computed-- and the computed value for the paragraph is 16px. So that's what is inherited by the span.

Replaced element

The box properties (margin, padding, and border properties) on inline replaced elements are handled just like box properties on block-level elements. The content height and width are determined by the height and width properties (which may be auto), and the padding, border, and margin are placed outside of the content.

-2px margin +2px top border +2px bottom border+ 12px height =14px

Selector inline box equals line-hieght

line-height breakdown
img 14px 14px
0

[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

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

[note2] When the 'line-height' value is less than the font size, the final inline box height will be less than the font size and the rendered glyphs will "bleed" outside the box. 10.8.1

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

1. First you have to split the content-area boxes according to the computed 'font-size' of the element's text..."

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

Selector content-area box computed font-size Percentage split

Baseline division before vertical-alignment
p#se4 10px 10px 75% of 10px above the baseline =7.5px
25% of 10px below the baseline =-2.5px
sub 8px 8px 75% of 8px above the baseline =6px
25% of 8px below the baseline =-2px

2. Find half leading

Selector inline box equals line-height minus font-size =leading half leading
p#se4 120% of 10=12px 10px 2 1
sub 12px inherited 8px 4 2

3. "...then add any half-leading to the top and bottom."

Selector

Baseline division before vertical-alignment

 + half leading

Baseline division before vertical-alignment

 Vertical-align shift Baseline division
p#se4 7.5px +1 8.5px +0 =8.5px
-2.5px +-1 -3.5-px +0 =-3.5px
sub =6px +2 =8px -3 =5px
=-2px +-2 =-4px -3 =-7px

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

Selector vertical-align Amount
p#se4 baseline defaut 0px
sub -3px -3px
img baseline defaut 0px

Baseline is the default for replaced content:

Selector inline box line-height breakdown

Baseline division
img 12px 14px 14px above the baseline
0px 0px 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 img element has the uppermost box top at 14 px above the baseline. The sub element has the lowermost box bottom at 7px below the baseline. So the distance between the 2 values 14px + 7px =21px.

Selector Baseline division Uppermost box top Lowermost box bottom Distance between the 2 values
p#se4 8.5px above the baseline     14+7=21px
-3.5px below the baseline    
sub 8px above the baseline    
7px below the baseline   7px below the baseline
img 14px above the baseline 14px above the baseline  
0px below the baseline