CSS Display & Visibility

The CSS Display property determines the manner in which an HTML element - a box - is displayed. While the specification allows for a plethora of display types, in practice only the first three, listed below, are consistently implemented across all the major browsers.

• none: This causes the box display to be suppressed. Normal flow rules are applied to the surrounding boxes as though the suppressed box did not exist. Naturally, this does not apply to blocks that specify position:absolute or position:fixed. What about floated boxes? When an box is floated its display type is automatically set to block. This would be in conflict with a display:none specification so it is ignored by Firefox and Opera. True to form, IE6 goes its own way and choses to honor the display specification rather than the float and hides the box.
• block: This is the default display type for all block boxes, such as div and p. Floating inline boxes turns them into block boxes. The border, padding and margin properties of block level boxes can be used to good effect for layout purposes.
• inline: The anchor and span are examples of inline boxes. The border property of inline boxes can on the odd occasion be used to good effect. However, there is almost never any legitimate reason for setting the margin and padding properties to non-zero values. If they are set, only the #-left/right assignments are obeyed. Inline boxes take up only as much horizontal space as is strictly necessary to display their contents and do not breakup the flow of their neighbors.
• inline-block: Specifying display:-moz-inline-stack;display:inline=block causes the box to be treated like an inline box but with all of its block attributes - including padding-top, margin-top etc - being obeyed. The principal use of this specification is to force an inline box to occupy a specified amount of horizontal space.
  
  Note the display:-moz-inline- stack specification. This is one of the rare occasions where Firefox actually fails to comply with standards. It ignores the display:inline-block specification. The only way to get it to deliver the effect of an inline block is by using the former specification. To ensure functionality across all major browsers it is necessary to specify both. To get the correct effect in IE it is vital to specify the display property in the above order - if it sees -moz-inline-stack after having encountered inline-block IE gets confused and does nothing.
  
  Finally, it is worth noting that both Firefox and IE ignore the -moz-inline-stack/inline-block specification if applied to a block box, such as div, h1 etc.
• list-item: When applied to an box, block or inline, nested inside a <ul>..</ul> or <ol>..</ol> block display:list-item causes the box to be displayed with a list bullet. Given that list-items are block boxes, the subject box - even if it is a span or an anchor - will behave like a block box.

We refrain from discussing the remaining display options since browser implementations for them are highly patchy and variable. The CSS Visibility property is far simpler to understand. With visibility:hidden the box is removed from the visual display. However, it continues to influence the normal flow of its neighbors as though it were still visible. visibility:visible is the default property setting. This property can take a third value, collapse which is only relevant for table rows where it has the same effect as display:none.