2種類のライン
リンク余白の設定は、以下の2種類のラインがあります。
■ 何も設定していません
- ulとliを組み合わせるとリストアップされます。
- 項目を配列する時に使用します。
- Top >> 無料ホームページhp作成
<ul>
<li>ulとliを組み合わせるとリストアップされます。</li>
<li>項目を配列する時に使用します。</li>
<li>Top >> <a href="http://www.syousai.com/web.html">無料ホームページhp作成</a></li>
</ul>
◇ margin-top
- ulとliを組み合わせるとリストアップされます。
- 項目を配列する時に使用します。
- Top >> 無料ホームページhp作成
<div class="margin">
<ul>
<li>ulとliを組み合わせるとリストアップされます。</li>
<li>項目を配列する時に使用します。</li>
<li>Top >> <a href="http://www.syousai.com/web.html">無料ホームページhp作成</a></li>
</ul>
</div>
- スタイルシート
- div.margin li { margin-top: 0.5em }
※ padding-topでも可能
◇ line-height
- ulとliを組み合わせるとリストアップされます。
- 項目を配列する時に使用します。
- Top >> 無料ホームページhp作成
<div class="height">
<ul>
<li>ulとliを組み合わせるとリストアップされます。</li>
<li>項目を配列する時に使用します。</li>
<li>Top >> <a href="http://www.syousai.com/web.html">無料ホームページhp作成</a></li>
</ul>
</div>
- スタイルシート
- div.height li { line-height: 1.5em }
見た目は変わりませんが、クリック後に違いがでます。ul以外も一緒です。