HTMLで余白を入れてスペースを空けたい場合どうしたらよいか

HTMLやCSSをたまにしか書かない自分が度々遭遇して
困っていた小さな悩みが解決したのでメモ。


例えば、 jQuery Mobile でリストビューとボタンを並べて書く。

<div data-role="content">
    <ul data-role="listview">
        <li><a href="#page1">リスト1</a></li>
        <li><a href="#page2">リスト2</a></li>
        <li><a href="#page3">リスト3</a></li>
    </ul>
    <a href="#top" data-role="button" data-theme="b">Top</a>
</div>


そうするとリストビューとボタンが重なって表示されてしまう。


で、こうゆう場合、いつもbrタグを何個か入れたり、hrタグを入れることで
余白を入れて間隔を空けていたが、CSSを使って解決するまともなやり方を知った。


a要素をp要素で囲い、余白を取るためにp要素にstyle属性で「padding-top:15px」と指定する。

<div data-role="content">
    <ul data-role="listview">
        <li><a href="#page1">リスト1</a></li>
        <li><a href="#page2">リスト2</a></li>
        <li><a href="#page3">リスト3</a></li>
    </ul>
    <p style="padding-top:15px;">
        <a href="#top" data-role="button" data-theme="b">Top</a>
    </p>
</div>


こうすることで以下のようになった。


これならサイズ指定で間隔を細かく調整できる。
もちろんCSSCSS用ファイルに分離したほうがよいけど。