The CSS Display Syntax

This page shows the use of the CSS display property and how I use it on this website.

The use of the display: none; is used in my Fixed Bottom menu where the menu items and responsive icon are hidden and displayed according to screen resolution.

The syntax of the display: property is:

display: value;

The values are: inline, block, contents, flex, none -- inline-flex, inline-grid and inline-block ---- etc.

These are described and explained on the W3C site and the display: none and block are values that I know that I have used.

• display: none - this is used to hide the element (completely remove)
• display: block - Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width
• display: contents - Makes the container disappear, making the child elements children of the element the next level up in the DOM
• display: table - Let the element behave like a <table> element

The W3C Examples

I don't find these particularly helpful, but I have reproduced them here.

The display: contents example as it at first inspection appears to used in the Clearfix technigue on my responsive design template.

Here is the example for display: contents in which W3C say:

A demonstration of how to use the contents property value. In the following example the .a container will disappear, and making the child elements (.b) children of the element the next level up in the DOM:

Variation on the example:

I changed the class .a, which included the display: contents; property to a new class .c - the class .b (containing HELLO WORLD ) appears in a completely different manner as the class .a disappears and child elements are "moved up" in the DOM.

<style>
.c {
//  display: contents;
  border: 1px solid red;
  background-color: lightgrey;
  padding: 10px;
  width: 200px;
}
.b {
  border: 1px solid blue;
  background-color: lightblue;
  padding: 10px;
}
</style>

The display:contents; is commented out in class .c - To see the class definitions and the HTML code for this page please see the source of this page. Feel free to copy bits from it for your own use (that is what I do all the time!)

You will see that the HTML is pretty much the same for both variations of the example, but the result is quite different.

The MDN page on this

Mozilla seem to have a more comprehensive explanation here (as per normal). The display properties are grouped as: outside, inside, listitem, internal, box and legacy.

The display: contents and display: none are particular examples. Both of these are described as "box" properties.

Other CSS aspects that are highlighted on the page.

In keeping with many of the other pages on this website this page is really a "crib sheet" for my own development of code. It was never intended as being a guide for others.

On this page I created a new class, class .c, I then noticed that it was over-writing the definition I created for centered text in a paragraph (a <p> tag) in my .css file. I have left it as an illustration of the "specificity" of CSS declarations.

The redefinition of the .c class makes the "title repeat" at the foot of the page display incorrectly as compared to my other pages. It appears non-centered and left justified as it is placed in the HTML outside the "main" container <div>.

It is also outside the container after which floats are cleared - see my "Not clearing floats" page.