codescracker


css

CSS Display



« Previous Tutorial Next Tutorial »


CSS Display and Visibility

The display property specifies how an element is displayed, and the visibility property specifies if an element should be visible or hidden

CSS Show Hide Reset Demo

Image1
css display visible
Image2

Image5
css image visible

CSS Remove Demo

css image display
css image resetting

CSS Control Display of Element

CSS allows you to control the display of an HTML element by using the display and the visibility property. The table given below describes both the property used to control the display of an element using CSS.

Property Description
display The display property specifies how to display an element.
visibility The visibility property specifies whether the element should be visible or hidden.

The following code snippet shows the use of display property:

h1 { display: none; }

The following code snippet shows the use of visibility property:

p { visibility: visible; }

CSS also allows you to display the content of an HTML element as inline or blocks. When you display the content of an element as block, then it takes the full width of a Web page and is preceded and followed by a line break.

Let's discuss the display and visibility properties in detail.

CSS display Property

The display property is used to display and element in a specified manner. It generates a particular type of box for an element. This property takes different values, in which inline, block, and none are the most common.

CSS display Property Values

The different values of display property along with their uses are given in the following table :

Value Description
none Does not display an element.
block Generates a block box, which means a line break before and after an element.
inline Generates an inline box, which means no line break before and after an element. This is the default value.
inline-block Generates a block box, laid out as an inline box.
inline-table Generates an inline table element without any line break before and after the element.
list-item Generates an element as an item of a list element.
table Generates a table element with a line break before and after the element.
table-caption Displays an element as a table caption.
table-cell Displays an element as a table cell.
table-column Displays an element as a table column.
table-column-group Displays an element as a group of table columns.
table-footer-group Displays an element as a group of table footer.
table-header-group Displays an element as a group of table headers.
table-row Displays an element as a table row.
table-row-group Displays as element as a group of rows.
inherit Inherits the value of the display property from the parent element.

CSS visibility Property

The visibility property specifies whether an element is visible on a Web page or not. It takes four values, visible, hidden, collapse, and inherit.

CSS visibility Property Values

The values of the visibility property along with their usage are listed in the following table :

Value Description
visible Makes an element visible
hidden Hides an element
collapse Represent a value that is applied only to a table element and removes its rows and columns
inherit Inherits the value of visibility property from the parent element

You can hide an element either by setting its display property as none or by setting its visibility property as hidden. The difference is that the visibility property hides the element, but it preserves the space required by the element on the document. However, the display property does not preserve any space.

CSS Hide an Element

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

Let's look at the following example shows how to hide an element using CSS:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Display Visibility Hide Show Reset Example</title>
	<style>
		h2.hidden { visibility: hidden; }
	</style>
</head>
<body>

<h2>This is a visible heading element</h2>
<h2 class="hidden">This is a hidden heading element</h2>
<p>Notice that the hidden heading still takes up space.</p>

</body>
</html>

Here is the sample output produced by the above CSS hiding element example code:

css visibility hidden

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

Here is an example demonstrates how to hide an element without taking space using display:none in CSS:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Display Hide Visibility Show Reset Example</title>
	<style>
		h2.hidden { display:none; }
	</style>
</head>
<body>

<h2>This is a visible heading element</h2>
<h2 class="hidden">This is a hidden heading element</h2>
<p>Notice that the hidden heading does not takes up space.</p>

</body>
</html>

Here is the sample output produced by the above CSS hiding element without taking space example code:

css hidden element using none

CSS Display Block Elements

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

Following are examples of block elements:

CSS Display Inline Elements

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

Following are examples of inline elements:

Change How an Element is Displayed using CSS

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 the web standards.

Following are the example displays <li> elements as inline elements:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Display Example</title>
	<style>
		li { display: inline; }
	</style>
</head>
<body>

<p>Display a list of links as a horizontal menu:</p>
<ul>
	<li class="li1"><a href="/css/css-display.htm">Display</a></li>
	<li class="li1"><a href="/css/css-positioning.htm">Position</a></li>
	<li class="li1"><a href="/css/css-floating.htm">Float</a></li>
	<li class="li1"><a href="/css/css-align.htm">Align</a></li>
</ul>

</body>
</html>

Following is the sample output produced by the above CSS example code:

Display a list of links as a horizontal menu:

Let's look at the following example, displays <span> elements as block elements:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Display Example</title>
	<style>
		span { display: block; }
	</style>
</head>
<body>

<p>Below are the block displayed</p>
<span>A display property with a value of "block" results 
in </span> <span> a line break between the two elements.</span>

</body>
</html>

Here is the sample output of the above CSS example code:

css display example

Note : Setting of display property of an element only changes how the element is displayed, NOT what kind of element it is. So, an inline element with display:block is not allowed to have other block elements inside of it


« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test