CSS 2.1 Reference: display Property

The display property is used to specify the type of box that the element should use. This information is used to determine the manner in which the element is laid out and displayed. For example, a block element could be displayed as an inline element by specifying a value of inline. An element can also be prevented from being displayed by specifying a value of none.

This property is specified by using a keyword according to the syntax shown above.

CSS Example: The display property of a block-level element is set to inline.

  p {display: inline;}

CSS Example: The display property of a inline-level element is set to block.

  strong {display: block;}

CSS Example: The display property of a inline-level element is set to inline-block.

  span {display: inline-block; width: 100px; border: thin solid}

• inline - An inline box will be produced by the element. Inline box elements are not proceeded or followed by line breaks and they occupy only the width that they need.
• block - A block box will be produced by the element. Block box elements are proceeded and followed by line breaks. Block box elements occupy the full available width unless their widths are specifically set.
• list-item - The element will be displayed as a list-item element.
• inline-block - A combination block and inline box is produced by the element. The element will be laid out as if it were an inline box. However, the element functions as a block container to its contents. The width of the element's box can be set.
• table - The element functions like the HTML <table> element formatted as a block element.
• inline-table - The element functions like the HTML <table> element formatted as an inline element.
• table-row-group - The element functions like the HTML <tbody> element.
• table-header-group - The element functions like the HTML <thead> element.
• table-footer-group - The element functions like the HTML <tfoot> element.
• table-row - The element functions like the HTML <tr> element.
• table-column-group - The element functions like the HTML <colgroup> element.
• table-column - The element functions like the HTML <col> element.
• table-cell - The element functions like the HTML <td> and <th> elements.
• table-caption - The element functions like the HTML <caption> element.
• none - The element is prevented from being displayed. No box will be produced.
• inherit - The inherit keyword is used to specify that the value for this property should be taken from the parent element. If inherit is used with the root element, then the initial value for this property will be used.