タグとタグの間が空、をなくしたい。

質問

テキストに直接HTMLを打ち込みながら制作しています。
HTMLのチェックをしたところ、「<DIV> と </DIV> の間が空」という注意が表示されたのですが、どのように空要素をなくすのがスマートなのでしょうか？

独学で制作していたため、色々間違っている部分が多くあるかと思いますが、ご指導のほどよろしくお願いします…！

現在下記のようなパターンで使用していました。

1　<h2>○○○○○○○</h2>
2　<p>○○○○○</p>
3　<p>○○○○○</p>
4　<div style="margin-top:50px;"></div>
5　<h2>○○○○○○○</h2>
6　<p>○○○○○</p>
7　<p>○○○○○</p>

やりたかったこと＝
それぞれのh2の間に少し広めの空きを作りたかった。

divの空要素を書き込んだ理由＝
pにmarginを指定するとpとpの間にまで空きができてしまう
h2にmarginを指定すると、一番最初のh2の上が空きすぎてしまう
と言った理由からでした。

この場合、それぞれのh2の間に少し広めの空きを作るにはどうしたらいいのでしょうか？3行目のpにclassを指定すればいいのでしょうか…。
それともbr等で指定ができるのでしょうか？
空きをbrで記述した時も、あまり連続してbrを記入したらチェックで指摘されて困っています。

どうぞよろしくお願いします！

回答No.4

grumpy_the_dwarf · ベストアンサー

せっかく独学しているのなら、規格書を読みましょう。CSS2.1の
5.7 adjacent sibling selectorsがいいですね。
http://www.w3.org/TR/CSS21/selector.html#descendant-selectors

p要素の直後にあるh2要素にだけ適用されるには、p + h2と書けと
いうことですので、　p + h2 {margin-top:50px;} と書きましょう
かね。これで、最初のh2は直前にpがないので適用されません。

回答No.6

ganmo717

最初のh2の前に何があるのですか？

回答No.5

torayoshi

<h2>は型セレクタなんだからわざわざ一意セレクタ化する必要ないと思いますけどね。
簡潔に
<h2 style="margin-top:50px;">
と書くべきでは？

回答No.3

noname#187541

こんばんは。

ほかの方の方法いいかと思いますが、一応こんな方法もということで。

<div style="margin-top:50px;"></div>　を　<br Style="line-height:50px">

回答No.2

uriboar

HTML
--
<h2 id="first">見出し1</h2>
<p>本文1</p>
<p>本文1</p>
<h2>見出し2</h2>
<p>本文2</p>
<p>本文2</p>
--

CSS
--
h2 {
margin-top : 2em;
margin-bottom : 0;
}

h2#first {
margin-top : 0;
}

p {
margin-top : 0;
margin-bottom : 0;
}
--

表示結果の（おおよその）イメージ
-----------------------
見出し1
本文1
本文1

見出し2
本文2
本文2
-----------------------

回答No.1

fujillin

ｈ2にマージンを指定しておいて、最初のh2だけマージンをキャンセルするのがよろしいかと…
<style type="text/css">
h2 { margin-top:50px; }
h2:first-child { margin-top:0px; }
</style>

でもこれだと、疑似クラスに対応していないブラウザだとうまくいきません。
最初のh2にだけクラス設定をしておくとかが現実的かも。
<style type="text/css">
h2 { margin-top:50px; }
h2.top { margin-top:0px; }
</style>

<h2 class="top">○○○○○○○</h2>
<p>○○○○○</p>
<h2>○○○○○○○</h2>
<p>○○○○○</p>
<h2>○○○○○○○</h2>
<p>○○○○○</p>