Where do the bullets come from on <li> elements?

Question

My current understanding is that different HTML elements are separated in their functionality by their default CSS styling, semantics aside.

Using custom CSS, you could (inadvisably) make any HTML element behave like any other.

If that is correct, the only thing I cannot account for is the bullets on <li> elements. What CSS causes them? How can you add that to other elements?

---

Note to future readers: I recently learned HTML elements also differ by content categories.

Answer 1

The bullets are contained "within" the padding of <ul> element:

The padding is marked green and the margin orange:

Decreasing the padding shows that the bullets are "within" that padding:

Increasing the margin of the <ul> for example, shifts it right.

The list-style property controls the bullets themselves. Setting it to none will hide them. You would need to set the margin and padding to 0 if you want to get rid of the indent too.

ul {     list-style: none; } 

If you want to get rid of all margins / paddings and the bullet points, use this:

ul {     list-style: none;     margin: 0;     padding: 0; } 

---

Of course you can also apply bullets to other HTML controls:

div {     padding-left: 40px; } a {     display: list-item;     list-style: disc; }

<div>     <a href="#">Item #1</a>     <a href="#">Item #2</a>     <a href="#">Item #3</a>     <a href="#">Item #4</a> </div>