these can be applied to elements that default to the opposite display type.

Possible Values

* none - no display at all.
* inline - An inline box.
* block - A block box.
* inline-block - effectively a block box inside an inline box. Not supported by Mozilla at time of writing. IE will only apply inline-block to elements that are traditionally inline such as span or a but not p or div. Loopy.
* run-in - Either an inline or block box depending on the context. If a block box follows the run-in box, the run-in box becomes the first inline box of that block box, otherwise it becomes a block box itself. Crazy. Not supported by IE/Win or Mozilla at the time of writing.
* list-item - the equivalent of the default styling of the HTML li element.
* table - a block-level table - the equivalent of the default styling of the HTML table element. Not supported by IE.
* inline-table - an inline-level table. Not supported by IE.
* table-row-group - the equivalent of the default styling of the HTML tbody element. Not supported by IE.
* table-header-group - the equivalent of the default styling of the HTML thead element. Not supported by IE.
* table-footer-group - the equivalent of the default styling of the HTML tfoot element. Not supported by IE.
* table-row - the equivalent of the default styling of the HTML tr element. Not supported by IE.
* table-column-group - the equivalent of the default styling of the HTML colgroup element. Not supported by IE.
* table-column - the equivalent of the default styling of the HTML col element. Not supported by IE.
* table-cell - the equivalent of the default styling of the HTML td or th elements. Not supported by IE.
* table-caption - the equivalent of the default styling of the HTML caption element. Not supported by IE.

display: block means that the element is displayed as a block, as paragraphs and headers have always been. A block has some whitespace above and below it and tolerates no HTML elements next to it, except when ordered otherwise (by adding a float declaration to another element, for instance). display: inline means that the element is displayed inline, inside the current block on the same line. Only when it's between two blocks does the element form an 'anonymous block', that however has the smallest possible width.

There are two main types of drawing context in CSS that can be assigned to elements. One, display: block, creates positionable boxes. The other, display: inline flows the content as a series of lines within a box.

By default, a block takes up all horizontal space, so a series of blocks will be displayed one beneath the other, stacked vertically. As inline elements flow into lines, they are rendered horizontally, as one word after the other.

In general, you use block to lay out a page, while inline is reserved for textual content that you find within chunks of text, for instance, links.

There are also other types of drawing context, for instance, display: table, however these are more rarely used due to their specialised nature and/or lack of browser support.

It's important to note that inline elements cannot be assigned their own width, height, or vertical whitespace (margin/padding top/bottom).

If you are trying to make block elements behave like inline elements (where they stack next to each other), you should be using float. Floats will stack next to other floats in the same direction. Also, any inline element that is given float will automatically be given become a block.