CSS Display

You can use this display property to control the box type, an element generates.

CSS Display Property

The default display value for all the elements is defined by this CSS specification, e.g., the <span> element is displayed inline, while the <div> element is rendered as a block.

Changing the Default Display Value

An important implication of the display property is overriding the default display value of an element, for example, changing the block-level element to be displayed as an inline-level element or changing an inline-level element to be displayed as a block-level element.

Note: The CSS display property is among CSS's most powerful and useful properties. It can be very useful for creating web pages that look different but still follow web standards.

The most commonly used CSS display values are described in the following section.

Display Block

The display property's block value forces an element to behave like block-level element, like a <div> or <p> element. The style rules in the example here displays the <span> and <a> elements as block-level elements:

span {
    display: block;
}
a {
    display: block;
}

Try With Example

Note: When you change the display type of an element, it will change the display behavior of an element and will NOT change the type of element it is. To illustrate, an inline element set to display a block is not allowed to have a block element nested inside it.

Display Inline

The display property's inline value causes an element to behave as though it were an inline-level element, like an <a> or a <span> element. The style rules in the example here displays the <p> and <li> elements as inline-level elements:

Example :

p {
    display: inline;
}
ul li {
    display: inline;
}

Try With Example

Display Inline-Block

The display property's inline-block value causes an element to generate a block box that will be flowed with surrounding content that is in the same line as adjacent content. The style rules given here displays the <div> and <span> elements as inline-block:

Example :

div {
    display: inline-block;
}
span {
    display: inline-block;
}

Try With Example

Display None

A display value of none causes an element to generate no boxes. Moreover, the child elements do not generate any boxes even when you set their display property to something other than none. In this case, the document is rendered as though the element never existed in the document tree.

h1 {
    display: none;
}
p {
    display: none;
}

Try With Example

Note: The display value none for the display property will not create an invisible box; in fact, it creates no box at all. You can check the live demo given in the visibility vs. display section.