CSS Display and Visibility

The CSS classification properties specifies if/how an element is to be displayed, and to control the visibility of an element.

Box 1

Box 2

Box 3

Hiding an Element - display:none or visibility:hidden

Hiding an element can be done by setting the display property to "none" or the visibility property to "hidden". However, notice that these two methods produce different results:

visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout.

display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as the element is not there:

CSS Display - Block and Inline Elements

A block element is an element that takes up the full width available, and has a line break before and after it.

Examples of block elements:

• <h1>
• <p>
• <div>

An inline element only takes up as much width as necessary, and does not force line breaks.

Examples of inline elements:

• <span>
• <a>

Changing How an Element is Displayed

Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way, and still follow web standards.

The following example displays list items as inline elements:

The following example displays span elements as block elements:

Note: Changing the display type of an element changes only how the element is displayed, NOT what kind of element it is. For example: An inline element set to display:block is not allowed to have a block element nested inside of it.

More Examples

How to display an element as an inline element.
This example demonstrates how to display an element as an inline element.

How to display an element as a block element
This example demonstrates how to display an element as a block element.

How to make a table element collapse
This example demonstrates how to make a table element collapse.

Creating a horizontal menu
Use float with a list of hyperlinks to create a horizontal menu.

All CSS Classification Properties

The number in the "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2).

Altova® XMLSpy® - The industry-leading XML editor!

Whether you're new to XML or already an advanced user, the user-friendly views and powerful entry helpers, wizards, and debuggers in XMLSpy are designed to meet your XML and Web development needs from start to finish.

XML editor Graphical XML Schema / DTD editors XSLT 1.0/2.0 editor, debugger, profiler XQuery editor, debugger, profiler XBRL validator & taxonomy editor Support for Office Open XML (OOXML) Graphical WSDL editor & SOAP debugger Java, C#, C++ code generation And much more! Download a free trial today!