html怎么设置水平线与文字的距离

<div>

    文字--没有设置距离

    <hr/>

    文字

</div>

<div>

    文字

    <hr style="margin-top: 20px"/>

    文字

</div>

<div>

    文字

    <hr style="margin-bottom: 20px"/>

    文字

</div>

<div>

    文字

    <hr style="margin: 20px 0 30px;"/>

    文字

</div>