- キャリッジリターンによる隙間 -

キャリッジリターンとは,タグ <br> による改行ではなく, ソース中の実際の改行(リターンキーを押したときの改行のこと)です. ソースを書くとき見やすさなどのためから改行をしますが, 時にはこれが曲者となります.

たとえば,テーブルを使って画像を配置する場合です. 隣同士がくっついていてほしいとき,こんな風に HTML を書くと 二つの画像の間に隙間が出来たりします.

こんな風

1: <table width=250 height=150 border=0 cellpadding=0 cellspacing=0>
2: <tr>
3: <td width=100 height=50>
4: <img src="./images/gazo1.gif width=100 height=50>
5: </td>
6: <td width=150 height=100>
7: <img src="./images/gazo2.gif width=150 height=100>
8: </td>
9: </tr>
10: </table>

この問題の解決法

  1. <td></td> 内で改行をしない. (3,4,5行目を一行で書き,6,7,8行目も一行で書く)
  2. キャリッジリターンをコメントにする.
1. は,中身が長いとつらいので中身が短いときにする.
2. について.

(略)
<td width=100 height=50><!--
-->
<img src="./images/gazo1.gif width=100 height=50><!--
-->
</td>
<td width=150 height=100><!--
-->
<img src="./images/gazo2.gif width=150 height=100><!--
-->
</td>

(略)

上のような場合に限らず, スペースを入れていないのに空白が出来たときは (こんな風) キャリッジリターンを疑ってみてください. その空白が不必要なものであれば,キャリッジリターンをコメントタグで囲んでみてください.



[Table]