相關(guān)文章：CSS教程：行高line-height屬性(1)
7.3.3行高的計(jì)算與繼承 以em、ex和百分比為單位的行高，其基數(shù)是元素本身的字體尺寸。例如有代碼如下： <pstyle="font-size:20px;line-height:2em;">字高20px，行高2em。</p> <pstyle="font-size:30px;line-height:2em;">字高30px，行高2em。</p> 2個(gè)段落的行高都為2em，但是字體大小不同，因此顯示如圖7-23所示。 圖7-23行高的計(jì)算 行高可以設(shè)定得比字體高度小，此時(shí)多行的文字將疊加到一起，例如有如下代碼，其顯示如圖7-24所示。 p{ font-size:20px; line-height:10px; } <p>字高20px，行高10px。此時(shí)多行的文字將疊加到一起。</p> 圖7-24比字體高度小的行高 行高是可繼承的，但是繼承的是計(jì)算值，例如有如下代碼： p{ font-size:20px; line-height:2em; } pspan{ font-size:30px; } <p>字高20px。<span>字高30px。</span></p> <p>元素的行高2em，字體尺寸為20px，因此計(jì)算值為40px，雖然<span>元素本身的字體尺寸為30px，不過(guò)其繼承的行高仍為40px。但是在不同的瀏覽器內(nèi)顯示的效果卻不盡相同，如圖7-25所示。 圖7-25行高的不同表現(xiàn) 由于繼承的是計(jì)算值，因此當(dāng)元素內(nèi)的文字字體尺寸不一樣的時(shí)候，如果設(shè)定固定的行高很可能造成字體的重疊，例如有如下代碼，其顯示如圖7-26所示。 p{ font-size:20px; line-height:1em; } pspan{ font-size:30px; } <p>字高20px，行高1em，當(dāng)文本為多行時(shí)可能會(huì)發(fā)生文字重疊的想象。<span>字高30px。</span></p> 圖7-26行高繼承造成文字疊加 為了避免這種情況，可以為每個(gè)元素單獨(dú)定義行高，但是這樣很煩瑣，因此可以定義一個(gè)沒(méi)有單位的實(shí)數(shù)值作為縮放因子來(lái)統(tǒng)一控制行高，縮放因子是直接繼承的，而不是繼承計(jì)算值。例如修改上例中的行高為： p{line-height:1;} 則上例中的XHTML代碼顯示如圖7-27所示。 圖7-27縮放因子對(duì)行高的影響 當(dāng)內(nèi)容中含有圖片的時(shí)候，如果圖片的高度大于行高，則含有圖片行的行框?qū)⒈粨伍_(kāi)到圖片的高度，如圖7-28所示。 圖7-28含有圖片的行 注意：圖片雖然撐開(kāi)了行框，但是不會(huì)影響行高，因此也不會(huì)影響到基于行高來(lái)計(jì)算的其他屬性。 提示：當(dāng)行內(nèi)含有圖片的時(shí)候，圖片和文字的垂直對(duì)齊方式默認(rèn)是基線對(duì)齊，關(guān)于垂直對(duì)齊將在本章[7.4垂直對(duì)齊：vertical-align屬性]一節(jié)中討論。

最新評(píng)論