There are two main ways of elements appearance in a document tree; that are block-level elements and inline-level elements.
These block-level elements, upon being rendered, generate a principle block-level box that contains descendant boxes and other generated content.
Inline level elements are those that, upon being rendered, do not generate any new boxes but the content is being distributed in lines. Such elements are used for emphasizing certain text within a paragraph or inserting images, hyperlinks etc...
Inline elements generate inline-level boxes but also other elements that don't belong to inline-elements such as inline-table elements or inline-block elements. Such, non-typical, inline-level boxes are called atomic inline-level boxes; that is because such a box does participate in the inline formatting context as a single box.
To assign a box type to an element, the display property is used. This property does not change the default element's box type, it just changes the way that particular element displays on a page.
The display property contains following information:
- value: 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 or inherit;
- initial: inline;
- applies to: all elements;
- inherited: no;
- percentages: N/A;
- media: all;
- computed value: as specified.
The block and the inline value types cause an element to generate a block box and an inline box (or more) respectively.
The inline-block generates an inline-level block container; the element itself is formatted as an atomic inline-level box.
The values table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table row, table-cell and table-caption cause an element to behave like a table element.
The vastly used none value makes an element and all of its descendants disappear from the elements flow in the document. This property does not make element invisible, it actually removes it completely from the page resulting with no affect on the layout whatsoever. To make an element invisible but affecting the document's layout please refer to the property called visibility.
The values defining the block-level boxes are block, list-item and table while those that define inline-level boxes are inline, inline-table and inline-block.
An important note is that only value inline, block and none are commonly used. The other display types might have issues with older browsers.
There are special situations regarding a box generation and they are called anonymous block and inline boxes. To learn more about them, please go to the "CSS Advanced section".
CSS display property example: