codescracker


css

CSS List Style Position



« Previous Tutorial Next Tutorial »


The list-style-position property is used to specify the position of a list item marker in a list.

The syntax used to specify the position of a list item marker using the list-style-position property is as follows:

list-style-position: value;

CSS list-style-position Property Values

The table given below describes values of the list-style-position property in CSS:

Value Description
outside Keeps the marker to the left of the text. The bullets appears outside the content flow. This is default
inside Indents the marker and the text. The bullets appear inside the content flow
initial Sets this property to its default value
inherit Inherits this property from its parent element

The default value of the list-style-position property is outside.

CSS list-style-position Example

Here is an example on CSS list-style-position property:

<!DOCTYPE html>
<html>
<head>
	<title>CSS List Style Position Example</title>
	<style>
		ul.insd { list-style-position: inside; }
		ul.otsd { list-style-position: outside; }
	</style>
</head>
<body>

<p>The following list has list-style-position: inside:</p>
<ul class="insd">
	<li>CSS List Style Position Tutorial</li>
	<li>CSS List Style Position Example</li>
	<li>CSS List Style Position Test</li>
</ul>
<p>The following list has list-style-position: outside:</p>
<ul class="otsd">
	<li>CSS List Style Position Tutorial</li>
	<li>CSS List Style Position Example</li>
	<li>CSS List Style Position Test</li>
</ul>

</body>
</html>

Here is the sample output produced by the above CSS list-style-position property example code:

css inside outside list

« Previous Tutorial Next Tutorial »




Tools
Calculator

Quick Links
Signup - Login - Give Online Test