【marker-offset】リストのマークと内容の間隔を指定

marker-offsetプロパティでは、リスト項目のマークとリストの内容の間隔を指定することができます。

またmarker-offsetはdisplayプロパティのmarkerが設定された要素に対して有効となりますので、「display: marker」を併せて設定します。

※「display: marker」は疑似要素のbefore・afterに対してのみ適用できます。

なおリスト項目のマーク(マーカー)は「display: marker」が設定された要素に対して、ボックスの外側に生成されるため、マーカーのボックス自体はmarginを持っていません。 このためマーカーとリスト内容の間隔(距離)を調整したい場合はmarker-offsetを使用します。

ただしこのプロパティはCSS2.1では削除されており、一般的なブラウザではサポートされていません。 そのため現在ではpaddingmarginを使用して、リストマークとリスト内容の間隔を設定するのが一般的なようです。

書式

  • marker-offset : ……… リストマークと内容の間隔を指定

★:auto、数値+単位

auto
間隔が自動で設定されます(初期値)
数値+単位
数値にpxなどの単位を付けて間隔を指定します。

使用した時の例

.sample1 li:before {
  content:"";
  display: marker;
  marker-offset: 20px;
}

.sample2 li {padding-left:20px;}
<ul class="sample1">
  <li>サンプル</li>
  <li>サンプル</li>
  <li>サンプル</li>
</ul>

<ul class="sample2">
  <li>paddingの場合</li>
  <li>paddingの場合</li>
  <li>paddingの場合</li>
</ul>

ブラウザ上の表示例

  • サンプル
  • サンプル
  • サンプル
  • paddingの場合
  • paddingの場合
  • paddingの場合

※sample1の方は一般的なブラウザには対応していないため、変化はありません

対応ブラウザなどのデータ

初期値 auto 値の継承 継承しない
適用可能な要素 すべての要素
メディア visual / box

関連情報