CSS List-Style-Position Property



CSS Tutorial  >  List  >  List-style-position

The list-style-position property offers a way for the user to specify whether the marker should be treated as part of the regular text when it comes to formatting. Another way to think of this is whether the second line of a list item aligns with the bullet point or with the beginning of text on the first line.

The possible values of list-style-position are 'inside' and 'outside.' 'Outside' is the default value.

Below are examples to illustrate the difference between the two (notice the indentation and how the lines align):

Example 1: list-style-position is 'inside'

CSS Declaration

ul {list-style-position:inside;}

The following HTML code,

<ul>
  <li>First item illustrates when list-style-position is set to inside.
  <li>Second item
</ul>

results in the following,
  • First item illustrates when list-style-position is set to inside.
  • Second item
When list-style-position is set to 'inside,' the second line of a list item lines up with the bullet point.

Example 2: list-style-position is 'outside'

CSS Declaration

ul {list-style-position:outside;}

The following HTML code,

<ul>
  <li>First item illustrates when list-style-position is set to outside.
  <li>Second item
</ul>

results in the following,
  • First item illustrates when list-style-position is set to outside.
  • Second item
When list-style-position is set to 'outside,' the second line of a list item lines up with the beginning of the text in the first line.

Next: CSS List-Style-Image




Copyright © 2017   1keydata.com   All Rights Reserved   Privacy Policy   About   Contact