marker-offset 【リストマーカーに関する指定】
なし
marker-offsetプロパティは、displayプロパティのmarker値の指定された要素に対して有効です。
リストマーカーは、『display: marker』の要素に対して、基本ボックスの外側に、行ボックスとして生成されます。このボックスはpaddingとborderを持ちますが、marginを持ちません。そのため、『list-style-position』と『marker-offset』を使ってで指定主要ボックスとの距離を調節します。
display: marker;は、擬似要素【:before】か【:after】をセレクタとして指定し、それ以外のセレクタに対しては、'display: inline' と等しくなります。セレクタにマッチした対象のマーカボックスと基本ボックスの距離を指定します。
auto
自動的に感覚が指定されます。
数値で指定する
任意の単位に数値を付けて指定します。使える単位
inherit
継承する
marker-offsetの使用例
CSSファイル
.sample001 {
list-style: disc inside;
margin: 10px;
}
li:before {
display: marker;
marker-offset: 10px;
}
HTMLソース
<ul class="sample001">
<li>リストスタイル1</li>
<li>リストスタイル2</li>
<li>リストスタイル3</li>
</ul>
表示すると
- リストスタイル1
- リストスタイル2
- リストスタイル3
リスト関連項目
| list-style | マーカーに関する指定をまとめて行う |
| list-style-type | マーカー文字の種類を指定する |
| list-style-image | マーカー画像を指定する |
| list-style-position | マーカーの表示位置を指定する |
| marker-offset※ | マーカーとの間隔を指定する |
