The Display Property

There’s nothing special about how most of HTML elements work. Thus, you can make up most pages from a few tags that can be styled as you wish. The browser’s default visual representation of most HTML elements consist of varying font styles, margins, padding and display types.
The most fundamental types of display are inline, block-line and none and they can be manipulated with the display property and the values inline, block and none.

inline – elements that are displayed inline follow the flow of a line. Strong, anchor and emphasis elements as a rule are displayed inline.

block – adds a line break before and after the element. Header and paragraph elements are usually displayed block-line.

none – doesn’t display the element.

The following enables the title and the tag-line to be displayed next to each other rather than above and below each other:

h1 {
display: inline;
font-size: 2em;
}

#header p {
display: inline;
font-size: 0.9em;
padding-left: 2em;
}

This code is used in the print-only styles to basically ‘turn-off’ those elements, such as navigation:

#navigation, #seeAlso, #comments, #standards {
display: none;
}

display: none and visibility: hidden vary in that display: none takes the element completely out of play, where as visibility: hidden keeps the element and its flow in place without visually representing its contents.

Tables

table – initial display and you can mimic the tr and td elements with the table-row and table-cell values respectively.

The display property goes further by offering table-column, table-row-group, table-column-group, table-header-group, table-footer-group and table-caption as values. The good thing about these values is that you can construct a table by columns instead of using the row-biased method usual for HTML.

Other Display Types to Consider

list-item – displays as in the way that you would expect an li HTML element to. To work properly the elements displayed this way should be nested in a ul or ol element.

run-in makes an element either in-line or block-line depending on the display of its parent. However, it doesn’t work on IE or Mozilla based browsers.

compact makes the element inline or block-line depending on the context.

marker is used only with the :before and :after pseudo elements to define the display of the value of the content property.