CSSで最初の見出しだけマージンを削る

前置き

<h1>と<p>で文章を書くとき、<h1>のmargin-topを大きめに設定しておくと前の段落の<p>との間が十分に開いて読みやすくなると思います。この方法の欠点は、ページの先頭や囲み記事の先頭に大きな余白が入ってしまうことです。で、解決策を見つけました。

本文

擬似セレクタの :first-child を使います。

 h1 {
   margin-top: 20px;
 }
 h1:first-child {
   margin-top: 4px;
 }

これで、親要素の最初の子要素として<h1>が使われた場合のみ、margin-topが4pxになります。

例えば囲み記事なら、複数の<h1>や<p>を<div>でまとめておいて、<div>に境界線を付ければOKですね。

ふと思いついたのですが、<div>のpadding-topに負値を使っても解決できるかもしれません。

Last modified:2010/05/22 15:24:12
Keyword(s):
References:[言語Tips]
This page is frozen.