ちょっとした余白を上下に作りたくて
.space1 {
height: 17%;
}
などというクラスを作り、
<span class="space1"> </span>
のように、中身無しで使っていました。 こうすると、ウィンドウの縦幅17%分だけタテにスペースを取ることが出来ます。 しかし、このように中身の無い要素を作ってはいけません。 HTMLチェッカーでは減点対象となりました。 そこで、苦肉の策として次のようにしたらどうなるか？
<span class="space1"> . </span>
申し訳程度に目立たない . （ドット）を挿入してみました。 そうすると減点対象から外れ、一応問題無しとなりました。
しかし、もう少しスマートな方法を考えてみるのが洒落者の道義でしょう。 今度は縦幅を持つブロック要素を挿入するのでは無く、 17% のマージンを作ることによって同様の効果を狙ってみます。
.topspace {
margin-top: 17%
}
以上のような凡庸クラスを作っておき、 <p> <h2> <hr> のようなブロック要素、しかも上側に余白を作ってやりたいヤツだけを狙って、 クラスを呼び出してやるのです。
<hr class="topspace">
例えばこうすれば、横線の上に 17% の余白が生まれます。 こっちの方が、ザ・スタイルシートという感じでよろしいでしょう。