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 list-style-position property takes any of the two values, inside or outside. The inside value indents the marker in the inside direction with context to the other elements of the HTML document. The outside value, on the other hand, displays the marker to the outside or left of the list item.

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

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

Following table shows the Property Values

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

CSS list-style-position Example

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

<!DOCTYPE html>
<html>
<head>
<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>Java</li>
  <li>SQL</li>
  <li>PHP</li>
</ul>

<p>The following list has list-style-position: outside:</p>

<ul class="otsd">
  <li>Java</li>
  <li>SQL</li>
  <li>PHP</li>
</ul>

</body>
</html>

Here is the output of this CSS example:

css inside outside list

« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test