The two lines of text above should overlap. However, the top of the A should not go above the baseline of the g - it should only overlap the g-descender.
<div style="margin: 100px 0; line-height: 5px; font-size: 205px">
Some <span style="font-size: 5px">text</span> <span style="Line-height: 205px">Some</SPAN>
</div>
-------------Top of em square - 100px (205-5)/2 up ^ ------- | | | | | -|------------------------------------------------- 5px || ------------ |-------------- --------|| ^ -|----------|----------|-|-------|-----|-|-------|- | | | | | | | | | | |-------- | | | | | | | |(205-5)/2=100px | | | | | | |-------| | | | | | | | | | | | | | | | | ______ | | | | | | | | |text| |Baseline--------- -----------| | | | |-------- ------ SPAN | ------bottom of em square
Since the height of the line box is from the bottom of the bottom box to the top of the top one, only the bottom of g's will go outside the line box. This means that the line below, which has a line box equal to font-size should only overlap with the things that are below the baseline - i.e., the descenders.
This should not look the same - this should have much more overlap.
This should have massive overlap - not mere descender overlap (assuming the two pieces of text are rendered on different lines):
The code is:
<div style="margin: 100px 0; line-height: 0">
<span style="line-height: 5px; font-size: 205px">gggg</span>
<span style="font-size: 205px; line-height: 205px">AAAA</span>
</div>
This should also have massive overlap:
The code is (the same but for a BR element):
<div style="margin: 100px 0; line-height: 0">
<span style="line-height: 5px; font-size: 205px">gggg</span><br>
<span style="font-size: 205px; line-height: 205px">AAAA</span>
</div>
Copyright © RichInStyle.com 2000; all rights reserved. See copyright document for terms of use. Please visit Bukit Lawang flood appeal.