CSS Help - CSS advanced tutorials - display property

CSS advanced - display property declaration

Most HTML pages can be made from just a few tags and styled anyway you want. The browser's default visual representation of most HTML elements consist of varying font styles, margins, padding and, essentially, display types. The display property lets you define how a certain HTML element should be displayed.

The display property can have the following possible values:

• block
• inline
• none
• inline-block
• list-item
• run-in
• compact
• table
• inline-table
• table-row-group
• table-header-group
• table-footer-group
• table-row
• table-column-group
• table-column
• table-cell
• table-caption

The three most fundamental values are block, inline and none.

Block, inline and none values

block - puts a line break before and after the element.

Block behavior is exhibited by such HTML elements as BLOCKQUOTEs, DIVs, Headings and Paragraphs.

inline - elements that are displayed inline follow the flow of a line. Strong, anchor and emphasis elements are traditionally displayed inline.

none - this value turns off the display of an element (it has no effect on layout); all child elements also have their display turned off unconditionally. The document is rendered as though the element did not exist in the document tree.