、
と
の行間を狭くする方法

Question

お世話になります。ホームページを作成する場合、見出し

または

の下に
で本文を記述すると、見出しと本文の間が空いてしまいます。この間を狭く調整する方法を探しています。よろしくお願いします。

elttac · Accepted Answer

　No. 1 のご回答のように，これはスタイルシートの範疇ですが，もう少し根本的な方法で考えてみましょう。

おそらく，h1，h2，p の前後には，既定で 1 行分程度の空きができているはずです。そこで，それらの間の空きをすべて詰めてしまう記述を考えます。
　次の記述を <head>...</head> に加えてみてください。

<style type="text/css">
h1 { margin-top: 0; margin-bottom: 0 }
h2 { margin-top: 0; margin-bottom: 0 }
p { margin-top: 0; margin-bottom: 0 }
</style>

これでこれらの要素が隣接しても，ぴったりくっついて出てきます（ でくくる場合もありますが，XHTML を使わなければどちらでもかまいません）。
　詰めすぎ，と思われるなら，上記の数値をいじります。およそ 1 行分を「1em」として，数値を書き換えてください（「em」をつけることが必要です）。これで，間隔を好きなように調整できます。ほかの要素でも同様ですので，例にならって書いてみてください。

　具体的には，h1 と p，h2 と p の間にできる空きだけをつぶしたい場合は，h1，h2 の下マージンと p の上マージンを狭めます。

<style type="text/css">
h1 { margin-bottom: 0 }
h2 { margin-bottom: 0 }
p { margin-top: 0 }
</style>

このときは，h1，h2 の上マージンと p の下マージンはそのままです。ご質問の最低限のご要望を満たすのは上記の記述になります（ぴったりくっつくのがお嫌ならば，適切な間隔を指定してください）。

　あとは，ご自分で応用なされるとよいでしょう。これを機にスタイルシート（CSS）をはじめてみたいと思われれば，参考 URL の「Let's begin CSS」あたりをおすすめしておきます。

参考URL：http://www.tg.rim.or.jp/~hexane/ach/

naktak · Answer

以外は、スタイルシートで指定する事で可能です。

test

などでも可能です。

<h1>、<h2>と<p><div>の行間を狭くする方法

No. 1 のご回答のように，これはスタイルシートの範疇ですが，もう少し根本的な方法で考えてみましょう。

<P>以外は、スタイルシートで指定する事で可能です。

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

　No. 1 のご回答のように，これはスタイルシートの範疇ですが，もう少し根本的な方法で考えてみましょう。