html span display,CSS display

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 :

#myElement { display: none; }

This DIV element is not displayed

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:

@media only screen and (max-width: 600px) {

#myElement { display: none; }

}

@media only screen and (min-width: 601px) {

#myElement { display: inline; }

}

This DIV is only displayed on larger screens

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:

This text contains display : block elements.

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:

This text contains display : block elements.

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:

This text is written

Inside two div elements.

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:

This text is written

Inside two div elements.

Now, notice what happens when we set the display CSS property to inline

for the two div elements. Here is the HTML code:

This text is written

Inside two div elements.

And here is how the two div elements are now rendered in the browser:

This text is written

Inside two div elements.

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:

This text contains a

span element

and another

span element

and some text.

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:

This text contains a

span element

and another

span element

and some text.

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.