（再度）行間を詰める方法

質問

申し訳ございませんが、現在下記のタグで行間が詰めれなくて困っています。

同じものを左右に並べる予定です。

　<div id="sidebar1_new">
　<tr class="boxleft">
　<table width="440" height="90" border="1" cellpadding="0" cellspacing="0" frame="hsides" bordercolor="#999999">
　<td><p><a href="リンク先1" target="_blank">&nbsp;&nbsp;タイトル1</a>
　<p><a href="リンク先2" target="_blank">&nbsp;&nbsp;タイトル2</a>
　　</td>
　</table>
　</tr><!-- end boxleft -->
　</div><!--sidebar1 new -->

CSSは、#sidebar1 new.boxleft{
line-height:●●pt;
｝
という感じです。

　タイトル1とタイトル2の間を調整したいのです。また、できればテーブル内の上と下（ここではタイトル1の上、タイトル2の下）も調整できれば最高です。

このテーブルは左右で同じものを作りたいと思っています。一応、テーブルは出来ていますので行間だけです。

兎に角、テーブル内の行間を調整したいのです！

説明がうまくないですがご教授よろしくお願いします。
このCSSに色指定をするとそれは機能します。

回答No.2

bsx · ベストアンサー

本音を言えば、No.1の回答者さんの仰るようにHTMLタグやCSSの使い方について見直されたほうが良いとは思いますが、それだけでは話が進まないので具体的な部分を…。

＞タイトル1とタイトル2の間を調整したい
これについてはCSSで<p>タグに対して「margin」や「padding」でお好みの数値を指定してやれば良いと思います。
一度「margin:0;padding:0;」を指定してみれば行間がない（上下でくっ付いた）状態になりますので、そこから数値を入れていってみてもいいでしょう。

＞テーブル内の上と下（ここではタイトル1の上、タイトル2の下）も調整
これについては、HTMLタグ中の<table>に指定している「height="90"」を削除し、CSSで<td>タグに対してお好みの余白量になるように「padding」の数値を指定すれば可能です。

ただ、ここに提示された部分以外の記述によって、何がどう影響を受けるかが全く予想がつかないので、必ずしもご希望通りになるとは限りません。

お礼

marginとpaddingを入れたらうまく調整できました。
ありがとうございました。
1週間の悩み、解消ですっ！

回答No.1

fujillin

ご提示の部分の外側にもtableがあるのでしょうか？
なぜこのようなマークアップなのかわかりません。
table、tbody、tr、tdの構成をちゃんと確認してください。

pタグは段落なので、デフォルトでは1行分の行間があきます。
つめて表示するのなら違うマークアップになるのでは？

というわけで、ご質問の意味がよくわかりませんが…

＞CSSは、#sidebar1 new.boxleft{
ご提示のソースには「#sidebar1」に対応するid="sidebar1"という要素がみあたりません。また、 new.boxleftに対応するものもありません。

＞タイトル1とタイトル2の間を調整したいのです。
p要素は通常、段落用に改行します。これを詰めたいのであれば、marginを0にすれば通常の改行と同様になりますが…？

＞できればテーブル内の上と下も調整できれば
tableにheight指定があるので、その高さは確保されます。
余白の大きさを制御したいという意味であれば、td要素のpaddingを調整するなどしてあげればよろしいかと。