圖7-23行高的計算 行高可以設定得比字體高度小，此時多行的文字將疊加到一起，例如有如下代碼，其顯示如圖7-24所示。p{ font-size:20px; line-height:10px; } <p>字高20px，行高10px。此時多行的文字將疊加到一起。</p>
圖7-24比字體高度小的行高 行高是可繼承的，但是繼承的是計算值，例如有如下代碼：p{ font-size:20px; line-height:2em; } pspan{ font-size:30px; } <p>字高20px。<span>字高30px。</span></p> <p>元素的行高2em，字體尺寸為20px，因此計算值為40px，雖然<span>元素本身的字體尺寸為30px，不過其繼承的行高仍為40px。但是在不同的瀏覽器內顯示的效果卻不盡相同，如圖7-25所示。
圖7-25行高的不同表現 由于繼承的是計算值，因此當元素內的文字字體尺寸不一樣的時候，如果設定固定的行高很可能造成字體的重疊，例如有如下代碼，其顯示如圖7-26所示。p{ font-size:20px; line-height:1em; } pspan{ font-size:30px; } <p>字高20px，行高1em，當文本為多行時可能會發生文字重疊的想象。<span>字高30px。</span></p>
圖7-26行高繼承造成文字疊加 為了避免這種情況，可以為每個元素單獨定義行高，但是這樣很煩瑣，因此可以定義一個沒有單位的實數值作為縮放因子來統一控制行高，縮放因子是直接繼承的，而不是繼承計算值。例如修改上例中的行高為：p{line-height:1;}則上例中的XHTML代碼顯示如圖7-27所示。
圖7-27縮放因子對行高的影響 當內容中含有圖片的時候，如果圖片的高度大于行高，則含有圖片行的行框將被撐開到圖片的高度，如圖7-28所示。
圖7-28含有圖片的行注意：圖片雖然撐開了行框，但是不會影響行高，因此也不會影響到基于行高來計算的其他屬性。 提示：當行內含有圖片的時候，圖片和文字的垂直對齊方式默認是基線對齊，關于垂直對齊將在本章[7.4垂直對齊：vertical-align屬性]一節中討論。
新聞熱點
疑難解答
