CSS基礎教學(6)--文字行高

設定文字行高的語法如下

line-height:行高值;

例如

<DIV>這裡是一般預設的行高</DIV>
<DIV>這裡是一般預設的行高</DIV>
<DIV style="line-height:24pt;">這裡是 24 pt 的行高</DIV>
<DIV>這裡是一般預設的行高</DIV>
<DIV>這裡是一般預設的行高</DIV>

行高值也可以使用任何的長度單位, 例如

<TABLE border="1">
  <TR>
    <TD>這裡一般預設的行高</TD>
  </TR>
  <TR>
    <TD style="line-height:24pt;">這裡是 24 pt 的行高</TD>
  </TR>
  <TR>
    <TD style="line-height:300%;">這裡是 300% 的行高</TD>
  </TR>
  <TR>
    <TD style="line-height:2em;">這裡是 2 em 的行高</TD>
  </TR>
  <TR>
    <TD style="line-height:2pc;">這裡是 2 pc 的行高</TD>
  </TR>
  <TR>
    <TD style="line-height:24px;">這裡是 24 px 的行高</TD>
  </TR>
  <TR>
    <TD style="line-height:2mm;">這裡是 2 mm 的行高</TD>
  </TR>
  <TR>
    <TD style="line-height:1cm;">這裡是 1 cm 的行高</TD>
  </TR>
  <TR>
    <TD style="line-height:1in;">這裡是 1 in 的行高</TD>
  </TR>
  <TR>
    <TD>這裡一般預設的行高</TD>
  </TR>
</TABLE>

上面用 TABLE 標籤只是為了容易看出行高的效果而已
其中有一個使用了 2mm 的行高, 若你用 IE 來看, 可以發現文字上下的一部份已看不見了, 因為我們設定了行高, 且文字只有一行, 所以 TD 的高度就相當於只會有行高所設定的高度, 當文字本身的高度超過了行高時, 就會被遮住
但若你用 Firefox 來看, 可以發現雖然文字是完整的, 但已跟框線有重疊了, 這也是因為上述的原因, 只是 Firefox 仍將文字完整的呈現出來而已

但在 IE 上, 也並不是行高比文字高小時, 就一定會看不見, 我們看看下面的例子

<DIV>這裡是一般預設的行高</DIV>
<DIV>這裡是一般預設的行高</DIV>
<DIV style="line-height:1mm;">這裡是 1 mm 的行高</DIV>
<DIV>這裡是一般預設的行高</DIV>
<DIV>這裡是一般預設的行高</DIV>

以這個例子來說, 不管用 IE 還是用 Firefox, 文字都能被完整的呈現, 只是行高設定成 1mm 的那一行會與上下行的文字重疊

--gs--
{CSS基礎教學}{HTML基礎教學 FONT}

沒找到你要的東西嗎？歡迎留下你的問題！若是我知道的，我會盡力的回答。