10. Lists and Tables

All content types fit into one of two display types—inline and block. Almost. It may be obvious after thinking about it that tables with their columns, rows, headers, and spanning can’t quite be modeled by arranging a series of block elements, but lists with numbering or bullets also need some special tools.


HTML list elements (<ul> and <ol>) are simple block elements. Individual list items (<li>), too, are sized and positioned with the same box model, with dimensions, padding, margins, and borders behaving as expected. However, each item needs some extra parts to get the markers both positioned properly and designated or incremented properly.

display: list-item

The default display value for a list item is list-item ...

Get The CSS Pocket Guide now with the O’Reilly learning platform.

O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.