margin-*** は、上下左右のマージンを個別に指定するプロパティです。
（*** の部分には top、right、bottom、left が入りますが、ここでは left を使用して説明します。）
li 要素にこのプロパティを設定すると、リスト項目のインデントを指定することができます。
.example {
margin-left: 30px;
}
| margin-left | 左のマージンを指定します |
|---|
マージンの大きさは、数値+単位（px、他）か %（割合）、auto（自動）で指定します。
このマージンの指定については、「上下左右のマージンを個別に指定する」をご覧ください。
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
.example { margin-left: 25px; }
-->
</style>
</head>
<body>
<ul>
<li>Web制作全般</li>
<li>Webデザイン</li>
<li class="example">デザイナーA</li>
<li class="example">デザイナーB</li>
<li class="example">デザイナーC</li>
<li>Webプログラミング</li>
<li>運営管理</li>
</ul>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
■入れ子の指定と組み合わせた例
※入れ子にしたリストは自動的にインデントされますが、スタイルシートと組み合わせることで、そのインデントの大きさを調節することができます。
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
li li { margin-left: -25px; }
-->
</style>
</head>
<body>
<ul>
<li>ドメイン取得</li>
<li>WWWサーバー</li>
<li>Web制作
<ul>
<li>デザイン</li>
<li>HTML</li>
<li>プログラム</li>
</ul>
</li>
<li>運営管理</li>
</ul>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
