下の隙間をなくしたいのですが



0   名前: サスケ : 2006/11/18(土) 18:56  ID:AasjCHMs
テーブル内に書かれた”あいうえお”が上部にはきっちり隙間なく配置されますが、下部には少し隙間が出来てしまうことがあります(いつもではないのです)。
どなたか、容赦なく底辺に隙間なく配置(くっつける)方法をご存知でしたらお教え願えますか。
宜しくお願いいたします。



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head> </head>
<body>


<TABLE width="200" height="50" cellpadding="0" cellspacing="0" border="0" bgcolor="#4981DF">
<TR ><TD width="300" align="center" valign="top" >
あいうえお
</td></TR>
</TABLE>


<BR>

<TABLE width="200" height="50" cellpadding="0" cellspacing="0" border="0" bgcolor="#4981DF">
<TR ><TD width="300" align="center" valign="bottom" >
あいうえお
</td></TR>
</TABLE>

</body>
</html>


1   名前: カヅサツ ◆ThCi95HEzw : 2006/11/18(土) 18:56  [URL]  ID:O5hEMlpW
> テーブル内に書かれた”あいうえお”が上部にはきっちり隙間なく配置されますが、下部には少し隙間が出来てしまうことがあります(いつもではないのです)。

ご提示のソースを Windows Internet Explorer 7.0 で20回ほど繰り返し表示してみましたが、「少し隙間が出来てしまう」という現象は再現しないようです。

2   名前: サスケ : 2006/11/18(土) 18:56  ID:nzv995pJ
カヅサツさん、早速の返答ありがとうございます。

単純な記述でスペルミスも(多分)ないと思うのですが、やはり少しだけ隙間が開くのです。
本来は正方形の画像をおいて見ると良く分かるのですが、エディタを変えてみたり(効果があるのかどうか分かりませんが)したのですが、やはり隙間が、、。
HPを制作して10年程たつのですが、初めてのことなのでどうしてもその原因が知りたくてこの場所へ相談をさせていただいたのですが、、、。

サスケ


3   名前: くいん : 2006/11/18(土) 18:56  ID:nM/3KUU4
私の環境で提示されたソースを閲覧すると…

IE6
下部に1px程の隙間

FireFox
上部、下部共に1px程の隙間

になりました。
一応報告しておきます。

ブラウザによって違うのでしょうかね?

4   名前: カヅサツ ◆ThCi95HEzw : 2006/11/18(土) 18:56  [URL]  ID:O5hEMlpW
td要素の開始タグ直後および終了タグ直前の空白スペースをなくしてみると如何でしょうか。
判り易さのために、テキストをem要素にして赤い背景にしてみました。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head> </head> 
<body>


<TABLE width="200" height="50" cellpadding="0" cellspacing="0" border="0" bgcolor="#4981DF">
<TR><TD width="300" align="center" valign="top">あいうえお</td></TR>
</TABLE>


<BR>

<TABLE width="200" height="50" cellpadding="0" cellspacing="0" border="0" bgcolor="#4981DF">
<TR><TD width="300" align="center" valign="bottom"><em style="background-color: red; font-style: normal;">あいうえお</em></td></TR>
</TABLE>

</body>
</html>


5   名前: サスケ : 2006/11/18(土) 18:56  ID:e0Y7ZL40
くいんさん、ありがとうございます。

私の環境では、
ネットスケープ7で上下に1px程の隙間が開きます。
エクスプローラー6では上は隙間ナシ、下、すき間ありとなります。
ネットスケープでの表示は上下一貫していますので問題はないともいえますが。
エクスプローラーでは下だけが、、←これが気になるのです。

サスケ

6   名前: サスケ : 2006/11/18(土) 18:56  ID:e0Y7ZL40
カヅサツ さん、ご丁寧な返答本当にありがとうございます。

御指摘いただいたHTMでもやはり文字のバックは下部の位置と一致するのですが
文字はやはり1〜2px浮いてしまいます。

ウーン、なんだかどんどん原因が知りたくなってきました。

サスケ

7   名前: RippleGreen : 2006/11/18(土) 18:56  ID:AymYHx4A
こんにちは、RippleGreenと申します。

的外れかも知れませんが、この隙間は「ディセンダ(ベース・ラインより下にはみ出す部分)」なのではないでしょうか。
<TD>内にひらがなだけではなく、下記のようにアルファベットも併記してみるとディセンダ文字(g/j/p/q/yの文字)の下には隙間は無いように見えます。

<td>あいうabcdefghijklmnopqrstuvwxyzえおか</td>


一覧へ戻る