CSSでh1とその下の文字との行間を詰めたい

解決済

質問者：maceq
質問日時：2006/03/01 02:37
回答数：1件

h1～h6を指定した場合、そのすぐ下の文字との行間が1文字分空きますよね。
見栄えが良いように、h*のすぐ下の文字との行間を調整したい場合、CSSでは、どのように指定すれば良いでしょうか？
よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： elttac
回答日時：2006/03/01 09:05

　おそらく，h1，h2，……，h6，p の前後には，既定で 1 行分程度の空きができているはずです。

そこで，それらの間の空きをすべて詰めてしまう記述を考えます。
　次の記述を <head>...</head> に加えてみてください。

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

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

　具体的には，たとえば見出しの直後に p が来る場合，その間にできる空きだけをつぶしたい場合は，hn の下マージンと p の上マージンを狭めます。

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

このときは，hn の上マージンと p の下マージンはそのままです。ご質問の最低限のご要望を満たすのは上記の記述になります（ぴったりくっつくのがお嫌ならば，適切な間隔を指定してください）。
　hn の直後に来る要素に応じて，上マージンができる場合はそれを詰めてください。

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

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