CSS List styling - marker bullet not shown even with appropriate list-style-type

I have explicitly styled my ul elements to have list-style-type: disc. The li elements within an ul automatically inherit this styling. In other words, there should be bullet (which is what disc stands for) before each li element.

ul {
  list-style-type: disc; /* Does not work */
}
li {
  display: block;
}

<ul>
  <li>Foo</li>
  <li>Bar</li>
  <li>Baz</li>
</ul>

Firefox Inspector devtool correctly recognizes that all li elements in the list have the (inherited) value 'disc' for the property list-style-type.

However, as you can also see if you run the snippet, the disc (that is, the bullet) is NOT actually displayed in the browser representation. Instead, the list is displayed as if list-style-type was defined as none (i.e. no bullet or any symbol is seen in front of the li elements).

I'm wondering how this is possible at all: It seems that the browser display (no bullet) stands in direct contradiction to the declaration list-style-type: disc as correctly shown in the Inspector tool.

Anyone have an explanation for the apparent contradiction between what the Inspector tool (correctly) says and the actual browser representation?

Solution

That's because it has

display: block;

If you want a marker, the proper display should be

display: list-item;

Note this should be the default value for li elements. The Default style sheet for HTML 4 contains

li { display: list-item }

2.3. Generating Marker Boxes: the list-item keyword

The list-item keyword causes the element to generate a ::marker pseudo-element box [CSS-PSEUDO-4] with the content specified by its list-style properties (CSS 2.1§12.5 Lists) [CSS2] together with a principal box of the specified type for its own contents.

Otherwise, list-style-* properties don't apply:

Applies to: elements with display: list-item