内联格式化模式(line-height原理)(2)
作者:dudo 来源:dudo博客 时间:2008-06-29 14:37:00
这就是说,一个足够大的元素,即使只有一个很小的line-height,也可以通过指定content-area的值来使得和后面内容保持较大行距。例如,考虑下面的例子:
<FONT face=Arial><P style="line-height: 12pt; font-size: 12pt;">
<A style="font-size: 128pt;">anchor</A>
angry text
<B style="vertical-align: top">bold</B>
</P></FONT>
超级链接的content-area高度为128pt,但是由于指定了line-height,它的inline box只有12pt高。这个inline box位于baseline之上;根据上面的参数,我们就可能判断超级链接底部(bottom)位于baseline之上30pt。这就使得inline box的顶部位于baseline之上42pt。而纯文本则正好偏于baseline之上,其content-area高度为12pt,底部位于baseline之下2pt。加粗文本的content-area也是12pt高,但它是靠line-box的顶部对齐的。
“根据上面的参数,我们就可能判……位于baseline之上30pt”的计算原理:
以Helvetica字体为例来说。在Helvetica字体中已经指定了baseline的位置,文本会从baseline下降-219/1000,上升781/1000。因此,对于font-size大小为128pt来说,它下降(位于baseline以下)部分为-28pt(128pt*219/1000),上升(位于baseline心目)部分为100pt。根据line-height的规则,本例中为12pt,实际起作用的halfheading就是12pt-128pt)/2 = -58pt。half leading是从128pt 字母高度(EM)的顶部和底部计算得出的。因此,字体大小为128pt的inline box的content area底部就是-28pt-(-58pt)=58pt-28pt=30pt。同样,inline box的content area的顶部位于(baseline的)100pt-58pt=42pt处。
(注意:Helvetica字体处于数字的时候有轻微的变动。它实际上升和下降数值接近于775/1000 EM和-225/1000 EM。)
对于content area的baseline可能看来有点“怪异”,因为baseline不是正好处在字符的中间,而是向字符的底部稍微有点偏移。需要注意的是,这个例子只是用以介绍CSS规则的一个方面,而不是说每个人都应该对字体使用较大的负leading。
--Steve Zilles
现在计算得到line-box高度为44pt:42pt位于baseline之上,2pt位于baseline之下。加粗字体的inline-box顶部(在本例中同content-area一致)和line-box字体的顶部重合。纯文本之上有30pt的空白,而链接文字上部会有baseline之上58pt、之下26pt“浸入”到相邻行中中(注意,这些数字都是假定链接文本的inline box底部位于baseline以上30pt,溢出扩展部分主要根据链接的“content-area”的中点与baseline之间的关系决定)。
测试:对照这个测试文件和相关显示效果。两个示例中,都是在上面的代码基础进行了扩展,此外,前者和代码设置相同,后者使用了的36pt的链接。
如果在行内出现了一个可置换文本,它的content-area就等于它的实际高度和宽度加上所有的padding、border和margin。line-height对于可置换元素的inline box没有效果(但是当解释vertical-align属性的百分比数值时可以使用)。例如,考虑下面的例子:
<FONT face=Arial><P style="line-height: 12pt; font-size: 12pt;">
<IMG SRC="filler.gif" style="height: 120pt; width: 16pt; margin: 8pt;">
angry text
<B style="vertical-align: top">bold</B>
</P></FONT>
图片的content-area总高度为136pt(120pt + 8pt + 8pt),12pt的line-height会被忽略。此外,图片底部的外边缘(content加上margin)将会同baseline对齐,这会使line-box的顶部升高,因为图片inline box的顶部会比前面例子中的链接顶部要高。使可置换元素的inline-box比元素大小还要小的唯一方法就是使用负的margin值。顶部对齐的粗体文本将会与line-box的顶部对齐,这也正好是图片的顶部外边缘(content加margin)。
测试:对照这个测试文件:line-height.htm (4.37 KB)和相关显示效果。
两个示例中,都是在上面的代码基础进行了扩展,此外,前者和代码设置相同,后者使用了的30pt的图片,其margin值为6pt。
如果父级内联元素设置了border,那么border将和元素的font-size一致;同时也会和元素的content-area相匹配,后代元素。例如,考虑下面的例子:
<FONT face=Arial><P style="line-height: 12pt; font-size: 12pt;">
<SPAN style="border: 1px solid gray;">
<A style="font-size: 72pt;">anchor</A>
<IMG SRC="filler.gif" style="height: 60pt; width: 16pt; margin: 4pt;">
angry text
<B style="vertical-align: top">bold</B>
</SPAN>
</P></FONT>
SPAN的边框将和假定的content-area一致,在本例中为12pt,因为从父元素中继承来的font-size是12pt。(此外,在本例中SPAN的content-area和其inline box正好一致,因为font-size和line-height数值相同。)这个边框将会穿过段落内外部元素,可能在任何顶部对齐(top-align)的元素下方显示。在内联元素与SPANinline box重叠的情况下,规范中并未指定谁应该在谁的上方。测试:对照这个测试文件和相关显示效果。两个示例中,都是在上面的代码基础进行了扩展,此外,前者和代码设置相同,后者使用了的30pt的图片,其margin值o为2pt,此外还有一个36pt的链接。
测试:对照这个测试文件:line-height-test.htm (4.66 KB)和相关显示效果。两个示例中,都是在上面的代码基础进行了扩展,此外,前者和代码设置相同,后者使用了的30pt的图片,其margin值o为2pt,此外还有一个36pt的链接。在一些常见情况下,可以查看这个测试文档和H?kon Lie's 提供的相关显示效果。
在一些常见情况下,可以查看这个测试文档:line-height2.htm (3.86 KB)和H?kon Lie's 提供的相关显示效果。
英文原文:http://meyerweb.com/eric/css/inline-format.html