A Short CSS 'display' Property Tutorial

With a div or other HTML container element (such as p, pre, or span), the display property determines if, where, and how the content in the element is displayed.

Without the display property, your web page would be a mishmash of haphazardly displayed content. (All HTML elements that contain content visible on a web page have a default display property if no other value is assigned.)

One short tutorial can't cover the basics of every display property value. This tutorial addresses values:

• none
• block
• inline
• inline-block
• table
• table-cell

Although the display property can be used in any HTML container element, div will be used for the examples.

The none Value

The CSS display:none; declaration undisplays the content.

Example:

<div style="display:none;">HELLO!</div>

With the above in the web page source code, the content "HELLO!" won't be published.

It can be seen in the web page source code with a browser's "view source" menu item. But it won't be rendered on the page. Not even the space it would otherwise occupy is rendered. As far as the rendered web page is concerned, the div with "HELLO!" doesn't exist.

The block Value

The CSS display:block; declaration displays the content after a line break and ends with a line break. Unless a CSS declaration tells it otherwise, the div extends horizontally the entire width of the container, from left margin to right margin.

Example:

<div style="display:block; border:1px solid black; padding:3px;">HELLO!</div>

The code renders like this:

Many HTML container elements are display:block; by default. Examples are div, h3, p, and pre. Other HTML container elements have different default display values. Examples mentioned below are span, table, and td.

The inline Value

The CSS display:inline; declaration displays content within the line. There's no line break before or after unless it happens in the natural flow of the content.

Example:

He shouted 
<div style="display:inline; border:1px solid black; padding:3px;">HELLO!</div> 
three times.

The code renders like this:

The span element is display:inline; by default. Other elements, like div in the example, can be assigned the CSS display:inline; declaration so they behave like a span element would.

The inline-block Value

The CSS display:inline-block; declaration is like a display:inline; declaration except it can have a width and a height like display:block; declarations can.

Example:

He shouted 
<div style="display:inline-block; border:1px solid black; padding:3px;">HELLO!
<br>very
<br>LOUD</div> 
three times.

The code renders like this:

I'm aware of no standard HTML elements with a default display of display:inline-block;.

The table Value

The CSS display:table; declaration displays the content as if it was in an HTML table element. The width of the div is only as wide as required for the content. It causes a line break just like the HTML table element would.

Example:

<div style="display:table; border:1px solid black; padding:3px;">
HELLO!
</div>

The code renders like this:

The table element is display:table; by default. Other elements, like div in the example, can be assigned the CSS display:table; declaration so they behave like a table element would.

The table-cell Value

The CSS display:table-cell; declaration displays the content as if it was in an HTML table's td element. The width of the div is only as wide as required for the content. It does not insert a line break just like a table's td element wouldn't insert a line break.

Example:

<div style="display:table-cell; border:1px solid black; padding:3px;">
HELLO!
</div>
<div style="display:table-cell; border:1px solid black; padding:3px;">
HELLO!
</div>
<div style="display:table-cell; border:1px solid black; padding:3px;">
HELLO!
</div>

The code renders like this:

The HTML table's td element is display:table-cell; by default. Other elements, like div in the example, can be assigned the CSS display:table-cell; declaration so they behave like an HTML table's td element would.

Specifying a CSS display:table-cell; declaration for a div does not require an enclosing div with a CSS display:table; declaration. This may be counter-intuitive because of the "td elements must be inside a table element" requirement for HTML tables. But a CSS display:table-cell; declaration in a div doesn't have that requirement — it's independent.

Other display Properties

There are more values that can be assigned to the CSS display property. This article covered only the ones I think you're most likely to use.

Here's a list of CSS display properties not covered in this article. CSS Display Page has information and links for many of them.

You have examples and explanations for what are likely to be your most-used display property values. The table provides a hint of what else is possible.

(This article first appeared in Possibilities ezine.)

Will Bontrager