6 Examples to Understand ALL about CSS display Property

The Display property of CSS

The CSS display property is used to display or hide the specified HTML elements. The display property value as none makes the specified element hidden.

>>A display example to show a hidden div

The element will be hidden as it does not exist in the web page. Or you can say, an element with the display: none will not occupy any space on the web page.

The display property is also used to control the display of elements (block or inline) the way it does. As such, the block elements (div, p, h1, h2 etc.) are those that occupy full available width.

Besides, it adds line breaks before and after it. While the in-line items like <a>, <span> etc. are those that take only the required space.

See display inline-block example

This chapter will show examples of display in CSS for both: hiding elements and changing the behavior of inline or block elements by using the display property. First, let us look at the display with inline and block elements.

CSS display with inline-block elements example

To learn how display property works, first let us have a look at how normally the block and inline elements look.

For that, we are using a div block element and <a> tag, which is an inline element.

To make it clear, we have used border property where you can easily see the difference between the two:

CSS-display normal

Experience this example online

As you can see, the Div element is taking the full available width while <a> is taking only what is required.

The examples below show how to use the display CSS property to make div element as an inline element and <a> as the block element.

Display block element example

The following example shows how to use the display property in a block element. The example uses the CSS display property in a div block element to make it an inline element.

That means it will only take the necessary space and also removes the line-breaks after the display: inline value is applied.

Experience this example online

You can see, the div element is now occupying space where the text ends. Also, it removes line break by using the display inline value in the div element.

Display with inline element example

The following example shows how to use display: block value to an inline element. The example uses display property on the <a> inline element to make it a block element.

That means it will occupy whole space and also adds line-breaks after using the display: block value.

CSS display

Experience this example online

You see <a> which is basically an inline element is now acting as the block element by using display block value.

Display: none example to make elements hidden

The following example shows how to use the display none value. The example shows how to hide a div and heading elements with the display: none property value.

Experience this example online

You can use the JavaScript to make hidden elements as visible. The example below uses the jQuery (javascript library) to show an element visible which is made hidden by using the display: none.

Experience this example online

You can read more about making hidden elements as visible in the jQuery chapter: jQuery show.

CSS display table example to make table hidden and visible with jQuery

The following example shows how to use the display with the table. The example below shows how to hide a table with display: none property value. Upon clicking on the button, the table will be shown by using jQuery.

Experience this example online

Difference between CSS display and visibility properties

How to make elements hidden with the display property is explained above with examples. To make elements hidden with visibility property is explained in its own chapter.

The difference between these two properties is that the elements that are hidden by display: none property will not occupy any space or the web page will look like there is no element.

Whereas the element made hidden with the visibility: hidden will occupy element’s space.