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.
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.
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.
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.
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.