サイト内検索
...スタイルシート(css)...
スタイルシート・リスト
リスト全体の余白
- リスト全体の外側の余白は、marginプロパティを指定します。
- リスト全体の内側の余白は、paddingプロパティを指定します。
- ul 要素(ol 要素)に設定すると、リスト全体の余白の指定ができます。
- 初期値の余白を取り除くには、「ul要素」または「ol要素」に
- ul{
margin: 0 0 0 1em;
padding: 0;
} - と指定します。
- [使い方]
- .sample{
margin: 20px;
}
| プロパティ名 | 値 | 説明 |
|---|---|---|
| margin: | ; |
外側の余白を指定できます。
「数値+単位」（例・・100px）を指定します。 単位は、「px」・「em」など、または「%」を指定します。 auto（自動） |
| padding: | ; |
内側の余白を指定できます。
「数値+単位」（例・・100px）を指定します。 単位は、「px」・「em」など、または「%」を指定します。 |
margin・paddingの違いは、こちらをご覧ください
paddingについては、こちらをご覧ください。
marginについては、こちらをご覧ください。
サンプル
[ｈｅａｄの中]
<style type="text/css"><!--
div{
margin-bottom: 30px;
border: 3px #999999 double;
width: 400px;
}
ul{
padding: 0;
}
.sample1{
margin: 20px;
}
.sample2{
margin: 20px 0 20px 100px;
}
-->
</style>
[ｂｏｄｙの中]
<div><ul class="sample1">
<li>カサブランカ・ユリ科</li>
<li>モダンローズ・バラ科</li>
<li>胡蝶蘭・ラン科</li>
</ul>
</div>
<div>
<ul class="sample2">
<li>カサブランカ・ユリ科</li>
<li>モダンローズ・バラ科</li>
<li>胡蝶蘭・ラン科</li>
</ul>
</div>
[ブラウザ上]
- カサブランカ・ユリ科
- モダンローズ・バラ科
- 胡蝶蘭・ラン科
- カサブランカ・ユリ科
- モダンローズ・バラ科
- 胡蝶蘭・ラン科
