W3G

list-style-positionプロパティの値

list-style-positionプロパティに指定できる値のキーワードはそれぞれ以下の意味を示します。

outside

マーカーを主要ブロックボックスの外側に表示（初期値）

inside

マーカーを主要ブロックボックスの最内側に埋め込んで表示

"inside" を指定した場合、マーカー（行頭記号）はインラインボックスを形成する要素のように埋め込まれた形で表示され、マーカーの周辺に内容が回り込みます。

また、枠線（borderプロパティ）や背景（backgroundプロパティ）の設定もともなっている場合、"outside" が指定されるとリスト項目要素の枠線及び背景の外側にリスト内容が表示され、"inside" が指定されるとリスト項目要素の枠線及び背景の内側にリスト内容が表示されます。

list-style-positionプロパティの実装状況

IE

◯

Firefox

◯

Opera

◯

Chrome

◯

Safari

◯

iOS

◯

Android

◯

サンプル

ul li         { border : 1px dotted orange ; padding : 3px 0 ; }
.outside { list-style-position : outside ; }
.inside    { list-style-position : inside ; }

サンプルのように枠線や背景を伴う場合、リスト項目要素の枠線及び背景の内側にリスト内容が表示されます。