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.
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:
An inline element only takes up as much width as necessary, and does not force
line breaks.
Examples of inline elements:
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).
| Property |
Description |
Values |
CSS |
| display |
Sets how/if an element is displayed |
none
inline
block
list-item
run-in
compact
marker
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption |
1 |
| visibility |
Sets if an element should be visible or invisible |
visible
hidden
collapse |
2 |
Need an easy way to get data into XML, or transform XML to another format?
MapForce lets you map XML data to/from any combination of XML, database, flat file, Excel 2007, XBRL, or Web services data.
Then it transforms data instantly or auto-generates royalty-free data integration code for recurrent conversions.
New features in Version 2010!
Download a free, fully functional 30-day trial to experience the following features:
- Easy-to-use, graphical data mapping interface
- Instant data transformation
- XSLT 1.0/2.0 and XQuery code generation
- Java, C#, and C++ code generation
- Advanced data processing functions
- Support for all major relational databases including SQL Server, IBM DB2, Oracle, and more
- Visual Studio & Eclipse integration
Download a fully-functional trial today!
|
|
|
| 
