CSS display

The display CSS property determines how an HTML element is rendered in the element flow. The display CSS property can take one of three values:

• block
• inline
• inline-block

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

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 containsdisplay : blockelements.

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.

Defaults 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 Using That Value as Default
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.