List-style-position css

Question

I am confused about list-style-position.
I don't understand what is different between inside and outside value.
Please explain with examples.

Answer 1

In HTML, all elements are placed inside a 'box'.

list-style-position inside basically means that your bullet points are inside that 'box'

list-style-position outside means that your bullet points are outside that 'box'

list-style-none means that there is no bullet points at all

This link may provide some insight:
https://codepen.io/syedrafeeq/pen/jECKm?__cf_chl_jschl_tk__=07bc7450c34ba8851db1c1289ebb9904f149b922-1587433761-0-AaPyX50HcLIcHMzCMqoXMA0QeglPDM30qbQp4g-11uo3XdSJnW7IjvgkOeh0JvaHHbgf9kXiIn1cyA56Wv2EpmNRwo1ekx8nm8Ui9Ohm7FitCRE5hmb45dobtzvzCI7vOUYabeUmWkaqAGoSPolEj1CL4AHrXPoh-FXdpA0J4pQfF9ltp1BHYe8e3kySB0CzFFBVKdsQdy0mmGIp_BO605kQvHWvB4xJNgdQUJJ9XJz-lWzs2CLeDM7dA66p6iN6EYzavfpmpnmX2raRDsd0B4yFuaS3c3B21Zg7L3dx6GBuEvR9BFteVeUDYEihHYff27QHQKzWjYDcCxEydogbA_we-NipzTqjJAtTQae35qXA