display

The values of this property have the following meanings:
block
This value causes an element to generate a block box.
inline-block
This value causes an element to generate a block box, which itself is flowed as a single inline box, similar to a replaced element. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an inline replaced element.
inline
This value causes an element to generate one or more inline boxes.
list-item
This value causes an element (e.g., LI in HTML) to generate a principal block box and a list-item inline box. For information about lists and examples of list formatting, please consult the section on lists.
none
This value causes an element to not appear in the formatting structure (i.e., in visual media the element generates no boxes and has no effect on layout). Descendant elements do not generate any boxes either; the element and its content are removed from the formatting structure entirely. This behavior cannot be overridden by setting the 'display' property on the descendants.
Please note that a display of 'none' does not create an invisible box; it creates no box at all. CSS includes mechanisms that enable an element to generate boxes in the formatting structure that affect formatting but are not visible themselves. Please consult the section on visibility for details.
run-in
This value creates either block or inline boxes, depending on context. Properties apply to run-in boxes based on their final status (inline-level or block-level).
table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, and table-caption
These values cause an element to behave like a table element (subject to restrictions described in the chapter on tables).

The inside of an inline-block is formatted as a block box, and the element itself is formatted as an inline replaced element (e.g. a image).
Because white space is not ignored, it may force the last box to drop (this depends on the width of the containing block, if there is room for the gap between the boxes).

All boxes shrink-wrap. 'vertical-align' apply to these boxes (increase the height of one of the box to see how they vertically align).

To find out how to deal with the gap in between the boxes, visit the Layout topic pages, test case #07.

IE 6 and 7 do not support inline-block, but in these browsers it is possible to mimic this styling by using:

	display: inline;
	zoom: 1;

Try These

Watch This

aqua
yellow
pink

Check This

<div id="aqua">aqua</div> <div id="yellow">yellow</div> <div id="pink">pink</div>

Edit This

Use shift + enter to create new lines (even in Safari and Chrome).