リスト項目の間隔を指定する

[新着] Webテンプレートを仮オープンしました


margin-***: ***;

ブラウザ
Internet Explorer Netscape Firefox Opera
参考
書式基本 要素名 クラス ID

margin-*** は、上下左右のマージンを個別に指定するプロパティです。
*** の部分には toprightbottomleft が入りますが、ここでは bottom を使用して説明します。)

li 要素にこのプロパティを設定すると、リスト項目の間隔を指定することができます。


li {
margin-bottom: 5px;
}


margin-bottom 下のマージンを指定します

マージンの大きさは、数値+単位(px、他)か %(割合)、auto(自動)で指定します。

このマージンの指定については、「上下左右のマージンを個別に指定する」をご覧ください。

マークを背景画像で指定している場合は、margin-bottom ではなく padding-bottom で指定した方が良いでしょう(マークが欠けるのを避けるため)。


使用例

<html>
<head>
<title>TAG index Webサイト</title>

<style type="text/css">
<!--

#example li {
margin-bottom: 10px;
}


-->
</style>

</head>
<body>

<ul>
<li>WebデザイナーA</li>
<li>WebデザイナーB</li>
<li>WebデザイナーC</li>
</ul>

<ul id="example">
<li>WebプログラマーA</li>
<li>WebプログラマーB</li>
<li>WebプログラマーC</li>
</ul>

</body>
</html>

これをブラウザで見ると次のように表示されます

  • WebデザイナーA
  • WebデザイナーB
  • WebデザイナーC
  • WebプログラマーA
  • WebプログラマーB
  • WebプログラマーC


[特集] レンタルサーバー比較 & サーバー選びのチェックポイント

サイト内検索について - ベーシック版