CSS Display and Visibility

CSS

In this tutorial we will learn about CSS Display and Visibility property.

visibility

We use the visibility property to control the visibility of an element.

To make an element visible we set the visibility property to visible and to hide the element we set the property to hidden.

Note! Though the element is hidden but it stays in its position.

In the following example we have set the visibility to hidden for the 2nd paragraph.

If we look at the result below we can easily tell that the 2nd paragraph is not visible but it is still taking up its place.

p.second {
	visibility : hidden;
}

This is the 1st paragraph.

This is the 2nd paragraph.

This is the 3rd paragraph.

display

We use the display property to control how the element is display and not displayed.

display : none

To hide an element we set its display property to none. This makes the element invisible and also removes it from its position.

In the following example we have set the display to none for the 2nd paragraph. In this case the 2nd paragraph is not visible and removed from its position.

p.second {
	display : none;
}

This is the 1st paragraph.

This is the 2nd paragraph.

This is the 3rd paragraph.

display : block

We set the display property to block to make an element a block-element. This means the element will take up the entire width (left to right) and will have a new line before and after it.

Click here to learn more about block elements.

In the following example we have set the display property of span (having class second) to block.

By default a span element is an inline-element but the following style rule will make it a block-element.

span.second {
	display : block;
}

This is a paragraph and after the full stop a span starts. This is a span with display set to block. Paragraphs starts again.

display : inline

We set the display property to inline to make an element an inline-element. This means the element will take up only the required width to fit its content.

Click here to learn more about inline elements.

In the following example we have set the display property of both the p elements (having class sample) to inline.

By default a p element is a block-element but the following style rule will make it an inline-element.

p.sampe {
	display : inline;
}

This is the first paragraph having display set to inline.

This is the second paragraph having display set to inline.