List Styles

Other topics

Remarks:

Although the list-style-type is actually a property that applies only to list items (normally <li>), it is often specified for the list tag (<ol> or <ul>). In this case, the list items inherit the property.

Type of Bullet or Numbering

Specific for <li> tags within an unordered list (<ul>):

list-style: disc;                /* A filled circle (default) */
list-style: circle;              /* A hollow circle */
list-style: square;              /* A filled square */
list-style: '-';                 /* any string */

Specific for <li> tags within an ordered list (<ol>):

list-style: decimal;             /* Decimal numbers beginning with 1 (default) */
list-style: decimal-leading-zero;/* Decimal numbers padded by initial zeros (01, 02, 03, … 10) */
list-style: lower-roman;         /* Lowercase roman numerals (i., ii., iii., iv., ...) */
list-style: upper-roman;         /* Uppercase roman numerals (I., II., III., IV., ...) */
list-style-type: lower-greek;    /* Lowercase roman letters (α., β., γ., δ., ...) */
list-style-type: lower-alpha;    /* Lowercase letters (a., b., c., d., ...) */
list-style-type: lower-latin;    /* Lowercase letters (a., b., c., d., ...) */
list-style-type: upper-alpha;    /* Uppercase letters (A., B., C., D., ...) */
list-style-type: upper-latin;    /* Uppercase letters (A., B., C., D., ...) */

Non-specific:

list-style: none;                /* No visible list marker */
list-style: inherit;             /* Inherits from parent */

Bullet Position

A list consists of <li> elements inside a containing element (<ul> or <ol>). Both the list items and the container can have margins and paddings which influence the exact position of the list item content in the document. The default values for the margin and padding may be different for each browser. In order to get the same layout cross-browser, these need to be set specifically.

Each list item gets a 'marker box', which contains the bullet marker. This box can either be placed inside or outside of the list item box.

list-style-position: inside;

places the bullet within the <li> element, pushing the content to the right as needed.

list-style-position: outside;

places the bullet left of the <li> element. If there is not enough space in the padding of the containing element, the marker box will extend to the left even if it would fall off the page.

Showing the result of inside and outside positioning: jsfiddle

Removing Bullets / Numbers

Sometimes, a list should just not display any bullet points or numbers. In that case, remember to specify margin and padding.

<ul>
    <li>first item</li>
    <li>second item</li>
</ul>

CSS

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

Syntax:

  • list-style: list-style-type | list-style-position | list-style-image | initial | inherit;

Parameters:

ValueDescription
list-style-typethe type of list-item marker.
list-style-positionspecifies where to place the marker
list-style-imagespecifies the type of list-item marker
initialsets this property to its default value
inheritinherits this property from its parent element

Contributors

Topic Id: 4215

Example Ids: 14757,17779,17780

This site is not affiliated with any of the contributors.