The CSS display Property
Overview
The CSS property display controls how an element on a webpage is rendered. By rendered, we mean that the display property, depending on its value, will instruct the browser how the element that it is assigned to should be displayed, or placed, in relation to other elements that appear alongside it. Be default, all elements have a display value of inline which means as the page loads, each element is placed one after the other on a single line of the webpage until no more can fit on that line across the browser screen. Then, the browser will begin to fill the second line with the page elements and continue in this fashion until all elements of the page have been rendered on the screen. This is much like how the words in this article flow from the first sentence across and down the page until the last sentence. We will look at the many different values display can have later in this article but first lets just look at a simple example of how to apply the display property to an element
Syntax
The syntax for the display property is pretty basic and is much like most other CSS properties. We first decide which HTML element we will apply it to, in this case we will use the following <div>:
<div class=”box1”></div>
And then we can use whichever CSS selector we feel appropriate to select this element and apply the display value in the typical CSS property: value syntax like so:
.box1 {
display: inline;
}
This covers the very basic way in which we can implement the display property on elements. Following standard best practices, in this example we are assume that the HTML and the CSS files are separated and that they are linked together in the <head> of the HTML file. Now, let’s dive deeper into the more interesting aspects of display and how it can be very powerful in crafting a webpage just how you want it to look by leveraging all of the possible values it can accept.
Values
inline Value
As we mentioned before, the display property by default is set for all elements to be inline. However, browsers come with their own default styling for HTML elements and it is fairly common to see some elements being styled with the same display property values across all browsers making it seem as though those values were the defaults. But, inline is the actual default for display and here is an example of some display: inline values:
See the Pen Simple `display` Example by Brian Hernandez (@brianhernandez) on CodePen.
So, this is quite an interesting example. First, since most browsers retain the default display value of inline for the <span>, <em> and <strong> tags, it really isn’t necessarily to declare them like this but hopefully this reinforces what it means for an element to be inline along with the other styling definitions next to it. As you can see here, all of the “Lorem Ipsum” texts are highlighted in a different color. No matter what the padding values that are on the highlighted texts are, the word “dolor” follows a few pixels right after the end of the highlighted area. This is essentially what it means for an element to be “inline” as the other elements around it will continue to follow it on the same line right after it has render – as long as there is space available. So the <em>, <strong> and <span> tags aren’t getting their own line to exist on, but must share it with the rest of the text in the paragraphs. Also, notice how the vertical padding values in the <span> and <em> tags don’t affect the text position above or below them. However, the horizontal padding values in the <em> and <strong> tags do affect the distance from which the surrounding words are rendered in relation to them. This is another attribute of the inline value for the display property. This works the same with margin value definitions although an element with display: inline; will not accept any height or width value definitions.
inline-block Value
The inline-block value is very similar to the inline value. Having a look at an example will soon make the slight distinction of these two value types very clear:
See the Pen `display: inline-block;` Example by Brian Hernandez (@brianhernandez) on CodePen.
In this example we have all of the <span> tags with a display value of inline-block and we can quickly see that by doing this, the lines of text both above and below the blue highlighted <span>s respect the padding values since they are pushed out of the way. What is going on here is that a block level box (another display value we will touch on shortly) is being created which respects height, width and all padding and margin definition values. But this block characteristic of the element is, as a whole, still is treated like an inline element allowing for neighboring elements around it to be inline with it. We can see this in action by how the words not highlighted still sit on the same baseline as the words that are highlighted in blue.
block Value
The block display value is what many web browsers change the original value of inline from for those elements that tend to be containers of other elements. These elements typically are the <div>, <p>, <section>, <article>, <ol>, <ul> and heading tags. The block value will give the element it is associated with its own line in the flow of the HTML document, forcing other surrounding elements to the following line. Let’s take a look:
See the Pen `display: block;` Example by Brian Hernandez (@brianhernandez) on CodePen.
In the above example we see a bunch of different HTML elements all having the display: block; property-value pair definition. By using the different background-colors for highlighting, we can see that by default each element with the block definition fills the entire width of the viewable area, even if their content doesn’t reach across the screen. This is an attribute of the block value, to take up as much width as possible unless otherwise defined. Even if we made the widths of these elements much smaller, like in the case of the purple <div>, these block level elements still take up their own line on the page and don’t allow subsequent elements from sharing their same line. Again, most browsers will render these example elements with a display: block; by their own stylesheet defaults so it isn’t usually necessary to declare these display values for these elements but remember to think of them as having these values.
none Value
The display none value will simply remove the element that it is attached to (and also remove it from screen reader accessibility). Here is a little example:
See the Pen `display: none;` Example by Brian Hernandez (@brianhernandez) on CodePen.
As you can see from the example, the .vanish class has a display: none; definition on it making it containing the “Four” list item completely removed from the page. Easy peasy. However we will discuss further in the Special Notes section of this article why this may not always be good to use for simply removing content.
table Value
The table value for display is interesting because it is kind of a modern way to mimic the old way of how webpages were layed out by using <table> element and their variants. Basically, this value when applied to an element and its derivatives, will tell the browser to render the elements in… well a table. Lets take a look:
See the Pen `display: table;` Example by Brian Hernandez (@brianhernandez) on CodePen.
With this example we can see that the table value actually has a few variants including table-row and table-cell among others. The table value will define the larger container for the table-rows and table-cells that are within it. Further, the table-row definition will define the container for the table-cells that it contains. Tables and indeed display: table; aren’t used as much in modern web development since the separation of content (HTML) and style (CSS), has created a lot of flexibility and organization for creating websites. However, tables do excel at displaying tabular data so knowing this modern form of creating tables may be very useful in certain situations.
Honorable Mentions: flex and grid Values
flex
The flex value defines an element itself to be a block element but to take on the flexbox model for its contents. Here is a simple example of a <section> tag with display: flex; on it and the other properties and values that it can have as well as some values its children, the <div>s can have:
See the Pen qaEokm by Brian Hernandez (@brianhernandez) on CodePen.
In this example we can see how advanced the display: flex; property is by all of the automatic styling that is going on here. The <div> elements are spaced out evenly between each other without defining any margin’s or paddings on them just by using the ` justify-content: space-around; on the parent
grid
The grid value for display property is not quite yet finished and currently only Internet Explorer 10 with the -ms prefix is able to support grid. Basically, a display: grid; definition on a containing element will allow for some of the smart flexibility that flex provides but having the resulting aligning of elements be more in a grid-like fashion with clear columns and rows.
Special Notes
Here are some of the things to keep in mind with the display property.
If you are looking to use display: none; to simply hide some content, it is not advised to do it in this way. This will remove the content both visually and and make it invisible to screen readers. This may not always be the intent. For visually hiding elements but still doing it in an accessible way, consider using a predefined class that just removes the content visually like this HTML5 Boiler Plate Example:
.visuallyhidden {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px; width: 1px;
margin: -1px; padding: 0; border: 0;
}
If you want to visually hide an element but still retain it’s rendered dimensions on the page, you would have to use the CSS visibility property instead.
The flexbox model has been through many revisions and as a result currently has many different ways to implement it via different browser prefixes and syntaxes.
Finally, here is probably one of the most common real world examples in which the display property is used to change the default display value of an element property to help create a UI component the page:
See the Pen `\<ul\>`Menu Example with `display: inline-block;` by Brian Hernandez (@brianhernandez) on CodePen.
This example here shows how each <li> element is redefined from its normal block level value that many browsers give it to be inline so that all of the <li>s can sit on the same line. This creates a nice, easy to read menu that can go up on top of a page taking advantage of the greater horizontal realestate that computer screens have.
Browser Compatibility
inline, block and none values: Support started in Chrome 1.0, Firefox 1.0, Internet Explorer 4.0, Opera 7.0, and Safari 1.0.
inline-block value: Support started in Chrome 1.0, Firefox 3.0, Internet Explorer 5.5, Opera 7.0, and Safari 1.0.
table and etc. values: Support started in Chrome 1.0, Firefox 1.0, Internet Explorer 8.0, Opera 7.0 and Safari 1.0.
flex value: Support started in Chrome 21.0 (with -webkit prefix), Firefox 18.0, Internet Explorer 11, Opera 12.5, and Safar 6.1 (with -webkit prefix).
grid value: Only supported in Internet Explorer 10 (with -ms prefix).