CSS Display Property with Examples

The CSS display property is very important. It helps you control how elements are shown on your web page. This guide will explain the different values of the display property and show you examples to help you understand.

Display Values

The display property has several values. Here are the most common ones:

Block

An element with display: block; is a block-level element. It starts on a new line and takes up the full width available.

div {
    display: block;
}

Examples of block elements are <div>, <p>, and <h1>.

Inline

An element with display: inline; is an inline element. It does not start on a new line and takes up only as much width as it needs.

span {
    display: inline;
}

Examples of inline elements are <span>, <a>, and <img>.

Inline-Block

An element with display: inline-block; is like an inline element but you can set its width and height.

div {
    display: inline-block;
    width: 100px;
    height: 50px;
}

None

An element with display: none; is not shown on the page. It is completely removed from the document layout.

div {
    display: none;
}

Flex

An element with display: flex; becomes a flex container. Its children are laid out using the flexible box model.

div {
    display: flex;
}

Grid

An element with display: grid; becomes a grid container. Its children are laid out using the grid layout model.

div {
    display: grid;
}

Examples

Block Example

Block elements take up the full width available and start on a new line:

<div style="display: block; background-color: lightblue;">
    I am a block element
</div>

Inline Example

Inline elements do not start on a new line and take up only as much width as they need:

<span style="display: inline; background-color: lightgreen;">
    I am an inline element
</span>

Inline-Block Example

Inline-block elements can have a width and height set but still do not start on a new line:

<div style="display: inline-block; width: 100px; height: 50px; background-color: lightcoral;">
    I am an inline-block element
</div>

None Example

Elements with display: none; are not visible and do not take up any space:

<div style="display: none;">
    You can't see me
</div>

Flex Example

Flex containers can arrange their children in various ways:

<div style="display: flex;">
    <div style="background-color: lightblue; padding: 10px;">
        Child 1
    </div>
    <div style="background-color: lightgreen; padding: 10px;">
        Child 2
    </div>
</div>

Grid Example

Grid containers define rows and columns for their children:

<div style="display: grid; grid-template-columns: 1fr 1fr;">
    <div style="background-color: lightblue; padding: 10px;">
        Cell 1
    </div>
    <div style="background-color: lightgreen; padding: 10px;">
        Cell 2
    </div>
</div>

Conclusion

The CSS display property is very important for controlling how your web page looks. By understanding the different values—block, inline, inline-block, none, flex, grid—you can create layouts that look good and work well. Practice using these properties to see how they change the layout of your elements.