list-item (CSS display value)
list-item is a CSS display property value that makes an element behave like a list item. It combines block-level box behavior with list marker generation.
Key points
- Rendering: The element generates a principal block box and a marker box (the bullet/number).
- Markers: Default markers are bullets for unordered lists and numbers for ordered lists. Markers can be customized with the list-style-type, list-style-image, and list-style-position properties.
- Inheritance/context: Browsers typically apply list-item to li elements inside ul/ol, but any element can be given display: list-item.
- Layout effects: As a block-level box, list-item participates in block formatting (width, margins, padding). The marker sits outside the principal box by default when list-style-position is outside; inside places it within the principal box flow.
- Accessibility: Using list-item semantics helps assistive technologies recognize lists when used appropriately.
- Examples:
css
.item {display: list-item; list-style-type: disc; list-style-position: inside; margin-left: 1rem;}Browser notes
- Well supported across modern browsers.
- Custom marker styling (like ::marker) is supported in modern browsers; older browsers required workarounds.
Leave a Reply