CSS Display and Visibility

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;
}

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;
}

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;
}

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;
}