CSS List Styles Bullet Position
Example
A list consists of <li> elements inside a containing element (<ul> or <ol>). Both the list items and the container can have margins and paddings which influence the exact position of the list item content in the document. The default values for the margin and padding may be different for each browser. In order to get the same layout cross-browser, these need to be set specifically.
Each list item gets a 'marker box', which contains the bullet marker. This box can either be placed inside or outside of the list item box.
list-style-position: inside;
places the bullet within the <li> element, pushing the content to the right as needed.
list-style-position: outside;
places the bullet left of the <li> element. If there is not enough space in the padding of the containing element, the marker box will extend to the left even if it would fall off the page.
Showing the result of inside and outside positioning: jsfiddle
