Display Property in CSS: With Practical Examples

The Layout of elements on the webpage assists the browser to position the elements at the right spot. Elements' layouts are interpreted by the display property. In HTML, elements on a webpage are boxes (rectangular) that are attributed to their default values by the browser. Each element has its special attachment in the Flow layout

With CSS display property, the behavior of elements is controlled and identified. What this means is: should the element start a new line, occupy the full space, how an element should be displayed, or have a default value given by the browser? Knowing how to use the CSS display property is important for element layout.

CSS Display property syntax:

Display: value;

When declaring a display property for an element, CSS syntax requires a value. In other words, the value attached to the display property fixes the output result. Furthermore, this locates the individual model application of the value.
For example

element-name{
    display: value;
}

The display property has no value for the element name.
Overview

Overview

A display property controls the behavior/layout of HTML elements on the webpage. It must have an element to control its layout.

The syntax of the display property needs an assigned value. The value interprets what happens to the element.

There are different CSS display property values, however, a few will be discussed in this tutorial and resources will be provided for the rest.

Values

None
Hidden
Inline
Block
Inline-block
Flex
Grid

None

A display property with a value of none indicates that the element should not be displayed on the webpage. But it’s more appropriate to use the visibility property if you want to hide the element.
Example

Html

<h1 class="none">im hidden</h1>

.none{
    display: none;
    background-color: aqua;
    color: red;
}

The h1 text will not appear on the web page as the display property value is NONE.

Hidden

A value hidden hides the element from the webpage. A value hidden is different from the value NONE for three reasons:

It doesn’t delete the space occupied on the page.
It stores and may be reused later.
It’s used with the visibility property.

Example

Html

<h2 id="hidden">im hidden</h2>

#hidden{
    Visibility: hidden;
}

The h2 text is not visible yet it is there and may be reused later.

Inline

A value INLINE displays an element not on a new line i.e. the element takes the available space and doesn’t encroach on other elements lines.
Example

Html

<span>
       I AM INLINE

   </span>

span{
background-color:red;
display: inline;
color: black;
}

Result

The display property value of the text (I am inline) is inline.

Note

The text doesn’t create a new line, instead, it transcends after the first paragraph.
The text occupies the given space.
Span is an inline element.

Block

The value BLOCK is the opposite of INLINE. Element with the display property value of BLOCK takes the whole space, and start on a new line. If there are block-level elements, the value will stack them after each other.

Example

Html

<p id="item1">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit.
         Assumenda voluptatem veritatis asperiores Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum perspiciatis quae, iure quia nesciunt, et aperiam temporibus nisi, cum iste dolorum doloribus tenetur sequi dolor dicta praesentium adipisci distinctio laboriosam nihil ratione. Eligendi totam deserunt unde dignissimos. Nam, modi expedita?
    </p>
    <p id="item2"> Lorem ipsum dolor sit amet consectetur, 
        adipisicing elit. Necessitatibus exercitationem 
        ex distinctio eum porro soluta eligendi tempore n
        emo harum sed nihil esse commodi sunt totam tenetur asperiores facere de
        bitis mollitia accusantium amet, eos cupiditate corporis dolore laudantium. H
        arum, amet consectetur?</p>
        <p id="item3"> Lorem ipsum dolor sit amet consectetur, 
            adipisicing elit. Necessitatibus exercitationem 
            ex distinctio eum porro soluta eligendi tempore n
            emo harum sed nihil esse commodi sunt totam tenetur asperiores facere de
            bitis mollitia accusantium amet, eos cupiditate corporis dolore laudantium. H
            arum, amet consectetur?</p>

#item1{
background-color: red;
display: block;
color: black;

}
#item2{
    background color:purple;
    display: block;
    color: orange-red;

    }
    #item3{
        background-color: blue;
        display: block;
        color: pink;

        }

Result

The three paragraphs__ item1, item2, item3_ have a value of BLOCK.

Note

The paragraphs start on a new line.
The first item, the second item, and the third item take their spaces.
P is a BLOCK-LEVEL element.

Differences between inline and block elements

• Inline elements: The element's width and height are not respected by the browser except if specified, still no effect.

block elements: the browser gives the block elements default width and height.

Inline elements: The elements can’t contain block element.
block elements: The elements can contain inline and some elements.
Inline elements: The elements have no top and bottom margin.
block elements:The elements have top and bottom margin
Inline elements: Inline elements begin not on a new line
on the other hand, Block elements begin on a new line
Inline elements: Examples:
<a> <link><button><ul><span>.

Block elements: Examples:
<div><p><section><form><fieldset><h1-h6> <header>

Assuming you have inline block-level elements on the webpage, the layout will look this like:

The block elements stack above each other but the inline element, which is BUTTON, stays where we put it and don’t take the whole space.

Inline-block

Display an element that performs as an inline element. The key points to know are:

That the element will have a width and height
The top and bottom margins are seen.
The padding works with the inline-block
The element sits next to other elements like inline elements
All these don’t work with the value in the line.

Example

Html

<a href="button">button</a>
<a href="button">button</a>
<a href="button">button</a>

a{
display: inline-block;
width: 100px;
height: 20px;
background-color: black;
color: white;
text-align: center;
text-decoration: none;
padding: 0;
margin: 20px;

}

Result:

Figure 1 links element with a display property value of inline-block:

The three links elements are inline but we turn them to inline-block.

Flex

A value flex displays an element as a block-level flex-box model. Flex-box position an element plus the content one-dimensionally_ on a row axis.
Example

Html

<div class="container">
    <div>item 1</div>
    <div>item 2</div>
    <div>item 3</div>
    </div>

.container{
    display: flex;
    background: light slate gray;
    width:300px;
    height: 300px;

}
div{
    background: red;
    width:50%;
    height: 10%;
    margin: 2px;
    padding: 10px;
}

Result:

The value flex lays the items on a row axis.
Read to know more about Flex-box

Grid

A value grid displays an element as a block-level grid container. Grid repositions an element two-dimensionally_ on a column and row axis.
Example

Html

<div class="container">
    <div> grid item 1</div>
    <div>grid item 2</div>
    <div>grid item 3</div>
    <div> grid item 4</div>
    <div>grid item 5</div>
    <div>grid item 6</div>

    </div>

.container{
    display: grid;
    grid-template-columns:1fr 1fr 1fr;
    grid-template-rows: auto auto auto;

    background: lightslategray;

    margin: 10px;
    padding: 45px;

}
div{
    background-color: dark cyan;
    color: white;
    margin: 5px;
    padding: 10px;
    border-radius: 4px;

}

Result:

The value grid allows us to create three columns and three rows.

Read to know more about CSS grid grid

Conclusion
Display property controls the behavior of elements on a webpage. In this article, we covered some display properties and learned how to use them.

I hope you have gotten what you expect from this article. Please feel free to share your opinions by commenting below.

Resources
Display properties
Display properties