CSS display

Jakob Jenkov
Last update: 2020-02-08

The CSS display property specifies how an HTML element is rendered in the flow of HTML elements on the page. The CSS display property can take one of values:

  • none
  • block
  • inline
  • inline-block
  • grid

How each of these CSS display property values affects an HTML element's rendering is explained in the following sections.

display : none

The CSS display property value none will result in the HTML element not being displayed in the page in the browser. Also, it will not take up any visible space in the HTML page. Here is an example of an HTML element with its CSS display property set to none :

<style>
#myElement { display: none; }
</style>

<div id="myElement">
This DIV element is not displayed
</div>

You might wonder why you would include an HTML element in an HTML page and then apply the CSS display property value none to it, so it is not visible. There are at least 2 situations where this makes sense - which I will explain in the following sections.

The first situation is when you want to show or hide an HTML element depending on CSS Media Queries. For instance, you might want to only show a certain HTML element when the browser window is above a certain size. In smaller size browser windows you might want to hide that HTML element to use the available space more efficiently - to avoid cluttering the user experience. Here is an example set of CSS media queries combined with the CSS display property to show and hide HTML elements depending on the width of the browser window:

<style>
@media only screen and (max-width: 600px) {
    #myElement { display: none; }
}
@media only screen and (min-width: 601px) {
    #myElement { display: inline; }
}
</style>

<div id="myElement">
This DIV is only displayed on larger screens
</div>

This example will hide the HTML element with ID myElement when the browser window is 600 pixels or less wide.

The second situation is where you are using JavaScript to show and hide an HTML element by settings its display property to none and something else. Here is an example of switching the CSS display property value with JavaScript:

var element = document.getElementById("myElement");
element.style.display = "none";

display : block

The block value for the display CSS property makes an HTML element display as a separate block. A block starts on a new line, and content after the block starts on a new line too. Look at this HTML example:

<p>
    This text contains 
<span>display : block</span>
elements. </p>

This example contains a span element. The span element is normally rendered as part of the text flow. This is how the above HTML looks when rendered:

This text contains display : block elements.

Now, let us set the display CSS property to block for the span element:

<p>
    This text contains 
<span style="display:block">display : block</span>
elements. </p>

Here is how this example is rendered:

This text contains display : block elements.

As you can see, the span is now rendered as a separate, vertically disconnected block. This is the effect of the block value for the display CSS property.

display : inline

The inline value displays an HTML element as part of the normal text flow. Look at this HTML example:

<div>This text is written </div>
<div>Inside two div elements.</div>    

HTML div elements are normally rendered as block by default. Thus, each of the two div elements will be rendered as separate blocks. Here is how that looks:

This text is written
Inside two div elements.

Now, notice what happens when we set the display CSS property to inline for the two div elements. Here is the HTML code:

<div style="display:inline">This text is written </div>
<div style="display:inline">Inside two div elements.</div>    

And here is how the two div elements are now rendered in the browser:

This text is written
Inside two div elements.

Notice how the two div elements are now rendered as if they were both part of a normal text flow. No line breaks or anything.

display : inline-block

The inline-block value for the display CSS property makes an HTML element display like a block, but rendered as part of the normal text flow. What does that mean?

When you use the inline value you cannot control the width and height of the HTML elements. The browser determines that based on the content of the elements.

With the inline-block you get control of the width and height of the HTML elements again, even if they are rendered as part of the normal text flow.

Look at this HTML example:

<p>
    This text contains a
    <span style="width: 150px;">span element</span>
    and another
    <span style="width: 150px">span element</span>
    and some text.
</p>    

This example contains a p element with two span elements. The span elements have their width set using the width CSS property. Since span elements are rendered using display: inline by default, the two width CSS properties are ignored. Here is how the HTML is rendered in the browser:

This text contains a span element and another span element and some text.

See? The width CSS properties are ignored.

But, notice what happens when we set the display CSS property to inline-block for the two span elements. Here is first the HTML code:

<p>
    This text contains a
    <span style="display: inline-block;
                 width: 150px;">span element</span>
    and another
    <span style="display: inline-block;
                width: 150px">span element</span>
    and some text.
</p>

And here is how the HTML is rendered in the browser:

This text contains a span element and another span element and some text.

Now you can see that the two span elements have a width of 150 pixels. Since the text inside the span elements is less than 150 pixels wide, the span elements leave a white gap in the text flow.

display : grid

The CSS display grid property value makes the content of the HTML element (typically a DIV) layout its elements in a 2-dimensional grid. The CSS grid layout is very powerful and thus somewhat complex to describe and to understand. I have therefore decided to leave it out of this CSS display tutorial.

Default display Values For HTML Elements

Different HTML elements have different default values for the display CSS property. In the table below I have listed some of the most used HTML elements and their default values. Knowing their default display values may help you understand how your page is rendered. The list is not complete though, so for elements not in this list you will have to check a CSS / HTML reference.

display Value HTML Elements With This Default Value
block div, p, table
inline span, b, i, strong, em
inline-block img

Regardless of what default value an HTML element is using for its display CSS property value, you can always override it by setting the value of the display CSS property to the desired value.

Jakob Jenkov

Featured Videos

Java ConcurrentMap + ConcurrentHashMap

Java Generics

Java ForkJoinPool

P2P Networks Introduction

















Close TOC
All Tutorial Trails
All Trails
Table of contents (TOC) for this tutorial trail
Trail TOC
Table of contents (TOC) for this tutorial
Page TOC
Previous tutorial in this tutorial trail
Previous
Next tutorial in this tutorial trail
Next