CSS display

Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

The CSS display property specifies how HTML elements are rendered in the HTML element stream on the page. The CSS display attribute can accept one of the values:

• none
• block
• inline
• inline-block
• grid

The following sections explain how these CSS display attribute values affect the rendering of HTML elements.

display : none

The CSS display attribute value None causes HTML elements to not be displayed on the browser page. In addition, it does not take up any visible space in the HTML page. Here is an example of an HTML element whose CSS display property is set to None:

<style>
#myElement { display: none; }
</style>

<div id="myElement">
This DIV element is not displayed
</div>
Copy the code

You might wonder why you would include an HTML element in an HTML page and then apply the CSS display attribute value None to it, so it is not visible. This makes sense in at least two cases — which I’ll explain in the following sections.

The first is when you want to show or hide HTML elements based on a CSS media query. For example, you might only want to display certain HTML elements when the browser window is larger than a certain size. In smaller browser Windows, you might want to hide this HTML element to use the available space more efficiently — to avoid user experience clutter. Here is an example of a set of CSS media queries combined with CSS display properties that show and hide HTML elements based 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>
Copy the code

This example hides HTML elements with the ID myElement when the browser window width is 600 pixels or less.

In the second case, you use JavaScript to show and hide HTML elements by setting their display property to None and other things. Here is an example of using JavaScript to toggle CSS to display property values:

var element = document.getElementById("myElement");
element.style.display = "none";
Copy the code

display : block

The block value of the displayCSS property causes the HTML element to be displayed as a separate block. The block starts on a new line, and the content after the block starts on a new line. Take a look at this HTML example:

<p>
    This text contains <span>display : block</span> elements.
</p>
Copy the code

This example contains the SPAN element. The SPAN element is typically rendered as part of a text stream. The HTML rendered above looks like this:

This text contains the display: block element.

Now, let’s set the displayCSS property for the SPAN element to block:

<p>
    This text contains <span style="display:block">display : block</span> elements.
</p>
Copy the code

Here’s how this example is rendered:

This text contains the display: block element.

As you can see, the SPAN is now rendered as a single vertically broken block. This is the effect of the block value of the displayCSS property.

<div>This text is written </div>
<div>Inside two div elements.</div>
Copy the code

<div style="display:inline">This text is written </div>
<div style="display:inline">Inside two div elements.</div>  
Copy the code

display : inline-block

The inline-block value of the displayCSS property causes the HTML element to be displayed as a block, but rendered as part of a normal text stream. What does that mean?

When you use inline values, you have no control over the width and height of HTML elements. The browser determines this based on the content of the element.

With inline-block, you can again control the width and height of HTML elements, even if they are rendered as part of a normal text stream.

Take a 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>Copy the code

This example contains a ‘p’ element and two ‘span’ elements. The width of the ‘span’ element is set using the ‘width’ CSS property. Since the ‘span’ element is rendered using ‘display: inline’ by default, the two ‘width’ CSS attributes are ignored. Here is how HTML is rendered in the browser:

This text contains one span element and another span element as well as some text.

See? The widthCSS property is ignored.

However, notice what happens when we set the displayCSS property to inline-block for both SPAN elements. Here is 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>Copy the code

Here is how HTML is rendered in the browser:

This text contains one span element and another span element and some text.

Now you can see that the two SPAN elements are 150 pixels wide. Because the text within the SPAN element is less than 150 pixels wide, the SPAN element leaves white space in the text stream.

Default display value for an HTML element

Different HTML elements have different default values for the displayCSS property. In the table below, I’ve listed some of the most commonly used HTML elements and their default values. Knowing their default display values may help you understand how the page is rendered. However, the list is incomplete, so you must check CSS/HTML references for elements that are not in this list.

No matter what default value an HTML element uses for its displayCSS property value, you can always override it by setting the value of the displayCSS property to the desired value.