CSS display
Jakob Jenkov |
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:
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:
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.
| Tweet | |
Jakob Jenkov | |
