The difference between list-style-position:inside and outside in CSS

What is the difference between list-style-position inside and outside in the CSS list?

<a href= "https://www.baidu.com/s?wd=list-style&tn=44039180_cpr&fenlei= Mv6quakxtzn0izrqihckpjm4nh00t1ylmh7bnju-rhiwpwbduhf40zwv5hcvrjm3rh6spfkwumw85hfynjn4nh6sgvpst6kdthsqpzwytjceqlgcpyw9uz4bm y-bii4wuvyetgn-tlwguv3enwb3pjt1rj6s "target=" _blank "class=" baidu-highlight ">list-style</a>-position property to set where the list item tag is placed. The external (outside) flag is placed at a certain distance from the border border of the list item. The internal (inside) flag is treated like an inline element inserted in the front of the list item's contents. 
Code effects:


List-style-position inside is said that the number or grid style in Li's inside, he occupies the width of Li, and outside is outside Li, he does not occupy the width of li.

How to set the width of <li>?

A single Li can write this directly: <li style= "width:100px;" ></li>
If there are multiple li such as:

<ul><li> Set width 1</li><li> set width 1</li><li> set width 1</li></ul>
You can add a class:<ul class= "Widthstyle" in <ul> >
Then add between 

<style>.widthstyle li {width:100px;} </style>
This allows you to control the width of the Li, and you can add other styles as well.