リストマークとテキストの間隔を指定する

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


padding-***: ***;

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

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

li 要素にこのプロパティを設定すると、リストマーク(マーカー)とテキストの間隔を指定することができます。


li {
padding-left: 20px;
}


padding-left 左のパディングを指定します

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

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


使用例

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

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

#example li {
padding-left: 30px;
}


-->
</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


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

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