Element Type Rendering

Element type rendering is a special element property used to specify the type of arrangemnt for a tagged element. In general, the three main types of block in CSS2.1 are block, in-line, and none. An in-line type element is mainly used to cause the content of an in-line element to be distributed in lines inside the parent element.

Display Propery of an Element

Besides the three fundamental element types, block, in-line, and none, there are other predefined types of elements for special element flow and display arrangement inside another element. The possible values of display property of an element in the CSS2 specification are inline, block, list-item, inline-block, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, none, inherit.

Element Types

block

to cause an element to form a standard visual block. e.g.

 html, address,dress, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu, pre { display: block }

inline-block

to cause an element to form an inline visual block. e.g.

 input, select { display: inline-block }

inline

to cause an element to form an inline visual container block box. e.g.

 em { display: inline }

list-item

to cause an element to form a visual block containing a marker box and a principal inline. e.g.

 li { display: list-item }

none

to cause an element to form no visual box or block. e.g.

 head { display: none }

table

to cause an element to form a rectangular table block. e.g.

 table { display: table }

inline-table

to cause an element to form an inline rectangular table block. e.g.

 table { display: inline-table }

table-row-group

to cause an element to from a grouping block containing one or more rows of cell blocks. e.g.

 tbody { display: table-row-group }

table-column

to cause an element to from a grouping block containing cell blocks in column form. e.g.

 col { table-column }

table-column-group

to cause an element to from a grouping block containing one or more columns of cell blocks. e.g.

 colgroup { display: table-column-group }

table-header-group

to cause an element to from a header grouping block containing one row of cell blocks. e.g.

 thead { display: table-header-group }

table-footer-group

to cause an element to from a footer grouping block containing one row of cell blocks. e.g.

 tfoot { display: table-footer-group }

table-row

to cause an element to from a grouping block containing cell blocks in row form. e.g.

 tr { display: table-row }

table-cell

to cause an element to form a table cell block. e.g.

 td, th { display: table-cell }

table-caption

to cause an element to form a table cell. e.g.

 caption { display: table-caption }