CSS :: Свойство list-style-position

css-свойство list-style-position (от англ. position – позиция) задает расположение маркеров относительно содержимого пунктов списка.

Характеристики

Значение по умолчанию: outside.
Применяется: к элементам <li>, <ol>, <ul>, а также ко всем элементам, у которых значение display установлено в list-item.
Наследуется: да.
Анимируется: нет.
JavaScript: object.style.listStylePosition="value".

Синтаксис

list-style-position: inside | outside

Значения

inside – указывает браузеру на размещение маркеров вместе с содержимым пунктов списка.
outside – указывает браузеру на размещение маркеров за границей содержимого пунктов списка.

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-lists-3/#list-style-position-property

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/list-style-position

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
	
		ul{
		width: 500px;
		margin: 2em;
		padding: 0px;
		background-color: #009900;		
		}
	
		.list_2	{
		list-style-position: inside;
		list-style-type: decimal;
		}
		
		.list_3{
		list-style-position: outside;
		list-style-image: url("circle_orange.png");
		}
		
		.list_4{
		list-style-position: inside;
		list-style-type: square;
		}
		
		.list_5{
		list-style: decimal inside;
		}		
		
		.list_6{
		list-style: outside url("circle_orange.png");
		}			
		
	</style>
	
</head>
<body>

	<ul>
	
		<li>
			Все значения по умолчанию.<br><br>
		</li>
	
		<li class="list_2">
			list-style-position: inside;<br>
			list-style-type: decimal;<br><br>
		</li>
		
		<li class="list_3">
			list-style-position: outside;<br>
			list-style-image: url("circle_orange.png");<br><br>
		</li>
		
		<li class="list_4">
			list-style-position: inside;<br>
			list-style-type: square;<br><br>
		</li>
		
		<li class="list_5">
			list-style: decimal inside;<br><br>
		</li>
		
		<li class="list_6">
			list-style: outside url("circle_orange.png");
		</li>
		
	</ul>
	
</body>
</html>

Пример №1