2種類
リンク余白の設定は、margin-topとline-height利用した2種類あります。
ここでは、リストにリンクを使用する場合を紹介します。余白がなく窮屈な感じよりも、2種類を参考にある程度設定しておいた方がよいです。
以下は、見た目は変わりませんがリンクのクリック後に違いがでます。
margin-top
- ulとliを組み合わせるとリストアップされます。
- 項目を配列する時に使用します。
- Top >> 無料ホームページhp作成
<div class="margin">
<ul>
<li>ulとliを組み合わせるとリストアップされます。</li>
<li>項目を配列する時に使用します。</li>
<li>Top >> <a href="https://www.syousai.com/web.html">無料ホームページhp作成</a></li>
</ul>
</div>
- スタイルシート
- div.margin li { margin-top: 0.5em }
※ padding-topでも可能
line-height
margin-topを使用した上記と見た目は変わりませんが、line-heightの設定はリンクのクリック後に違いがでます。
以下は、line-heightを1.5emで余白を設定しています。
- ulとliを組み合わせるとリストアップされます。
- 項目を配列する時に使用します。
- Top >> 無料ホームページhp作成
<div class="height">
<ul>
<li>ulとliを組み合わせるとリストアップされます。</li>
<li>項目を配列する時に使用します。</li>
<li>Top >> <a href="https://www.syousai.com/web.html">無料ホームページhp作成</a></li>
</ul>
</div>
- スタイルシート
- div.height li { line-height: 1.5em }