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

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

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

<div data-role="content">
    <ul data-role="listview">
        <li><a href="#page1">リスト１</a></li>
        <li><a href="#page2">リスト２</a></li>
        <li><a href="#page3">リスト３</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">リスト１</a></li>
        <li><a href="#page2">リスト２</a></li>
        <li><a href="#page3">リスト３</a></li>
    </ul>
    <p style="padding-top:15px;">
        <a href="#top" data-role="button" data-theme="b">Top</a>
    </p>
</div>

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

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