ウェブランサー

marker-offset - マーカーとの間隔を指定する

対応ブラウザ
IE7非対応IE8非対応Firefox非対応Chrome非対応Opera非対応Safari非対応
適用対象 マーカー要素
継承 しない

marker-offsetプロパティは、displayプロパティの[marker値]の指定された要素に対して有効です。

リストマーカーは、[display: marker]の要素に対して、基本ボックスの外側に行ボックスとして生成されます。このボックスはpaddingとborderを持ちますが、marginを持ちません。そのため、[list-style-position]と[marker-offset]を使ってで指定主要ボックスとの距離を調節します。

[display: marker;]は、擬似要素[:before][:after]をセレクタとして指定し、それ以外のセレクタに対しては、[display: inline]と等しくなります。セレクタにマッチした対象のマーカボックスと基本ボックスの距離を指定します。

marker-offsetに与えられる値

marker-offset: auto;
自動的に間隔が指定されます。
marker-offset: 数値;
任意の単位に数値を付けて指定します。
marker-offset: inherit;
継承する。

marker-offsetの使用サンプル

CSS
.sample01 {
 list-style: disc url(images/sample_list_marker.png) outside;
 margin: 0px 0px 0px 50px;
}
li:before {
 display: marker;
 marker-offset: 10px;
} 
XHTML
<ul class="sample01">
<li>リストサンプル01</li>
<li>リストサンプル02</li>
<li>リストサンプル03</li>
</ul>
表示確認
  • リストサンプル01
  • リストサンプル02
  • リストサンプル03

marker-offsetに関連するCSSプロパティ

リスト(list)関連
list-style リストマーカーに関する指定をまとめて行う
list-style-image リストマーカーに画像を指定する
list-style-position リストマーカーの表示位置を指定する
list-style-type リストマーカーの種類を指定する
marker-offset リストマーカーとの間隔を指定する