https://hmaster.net/


HTMLタグとCSSを使いメモ帳だけで無料でホームページを作成する 方法を分かりやすく解説しているサイトです。 初心者向けに見やすい、読みやすい作りになっています。

余白、間隔を調整する

{margin:値;}、{margin-位置:値;}、{padding:値;}、{padding-位置:値;}でリストの外側、内側の余白を 調整することが出来ます。

■ リストの外側、内側の余白、間隔の指定方法

リストの外側、内側の余白、間隔の指定方法は以下の通りです。

余白を入れたい位置 説明
margin:値;
padding:値;
値が1個の場合、上下左右 全ての余白が入ります。
margin:値1 値2;
padding:値1 値2;
値1が上下、値2が左右の余白です。
margin:値1 値2 値3;
padding:値1 値2 値3;
値1が上、値2が左右、値3が下の余白です。
margin:値1 値2 値3 値4;
padding:値1 値2 値3 値4;
値1が上、値2が右、値3が下、値4が左の余白です。
margin-top:値; ulやolに指定した場合
リスト全体の外側の上の間隔を調整します。
liに指定した場合
リスト項目の上の間隔を調整します。
padding-top:値; ulやolに指定した場合
リスト全体の内側の上の間隔を調整します。
liに指定した場合
リスト項目の上の間隔を調整します。
margin-bottom:値; ulやolに指定した場合
リスト全体の外側の下の間隔を調整します。
liに指定した場合
リスト項目の下の間隔を調整します。
padding-bottom:値; ulやolに指定した場合
リスト全体の内側の下の間隔を調整します。
liに指定した場合
リスト項目の下の間隔を調整します。
margin-left:値; ulやolに指定した場合
リスト全体の外側の左の間隔を調整します。
liに指定した場合
リストマークの外側の左の間隔を調整します。
(インデント)
padding-left:値; ulやolに指定した場合
リスト全体の内側の左の間隔を調整します。
liに指定した場合
リストマークとテキストの間隔を調整します。

【ブラウザ表示】

天井
  • リストの上下25px 左右0px
  • リストの内側 上下30px 左右100px
  • リスト項目
  • リスト項目
  • リストが30pxインデント
  • リスト項目の下の間隔50px
  • マークとテキストの間隔45px
  • リスト項目
  • リスト項目

ソース

天井
<ul class="sample4">
<li>リストの上下25px 左右0px</li>
<li>リストの内側 上下30px 左右100px</li>
</ul>

<ul class="sample5">
<li>リスト項目</li>
<li>リスト項目</li>
<li class="sample6">リストが30pxインデント</li>
<li class="sample7">リスト項目の下の間隔50px</li>
<li class="sample8">マークとテキストの間隔45px</li>
<li>リスト項目</li>
<li>リスト項目</li>
</ul>

外部ファイル

ul.sample4{margin:25px 0px; padding:30px 100px;}
ul.sample5{padding-left:25px;}
li.sample6{margin-left:30px;}
li.sample7{margin-bottom:50px;}
li.sample8{padding-left:45px;}


<body>~</body>に直接記入する場合

天井
<ul style="margin:25px 0px; padding:30px 100px;">
<li>リストの上下25px 左右0px</li>
<li>リストの内側 上下30px 左右100px</li>
</ul>

<ul style="padding-left:25px;">
<li>リスト項目</li>
<li>リスト項目</li>
<li style="margin-left:30px;">リストが30pxインデント</li>
<li style="margin-bottom:50px;">リスト項目の下の間隔50px</li>
<li style="padding-left:45px;">マークとテキストの間隔45px</li>
<li>リスト項目</li>
<li>リスト項目</li>
</ul>

このエントリーをはてなブックマークに追加 Instagram

■ その他の項目

リストマークの種類を変える
リストマークの位置を指定する
リストマークを画像にする
リストマークを背景画像にする
リストマークを一括指定
リストを並べる

スタイルシート一覧のページに戻る