What is the difference between Inside & Outside property of CSS Lists?

Question

Both have the same view..

Answer 1

Yeah, they actually look the same (but they are differents).
Tbh, List-Style-Position is an unnecessary property that you won't need it too much;
I will explain, though, the difference between its values: inside and outside.
Inside makes the bullets appear inside the content flow, while Outside makes them appear outside.
Let's have an example:

* HTML Code
<ul class="A">
<li>Text A here...</li>
</ul>
<ul class="B">
<li>Text B here...</li>
</ul>

* CSS Code
ul.A {list-style-position:inside}
ul.B {list-style-position:outside}

Now, previewing this code shows no difference between list A and list B
But, if you add this CSS line :
ul li {background-color: RED}
which assign red background color to all lists' items (in partically list A and B)
You will notice that:
* in list A: both bullet and content of <li> tag are having a common red background.
* in list B: The content of <li> tag is affected by the background color alone (and the bullet is not)

This example reveal the "small" difference between those two values.
(Please note that outside is the default value )
Hope I Helped U :3