CSS Display

Written by Swapnil RajaUpdated 30 Jul 2026

The CSS Display property determines how an HTML element is displayed on a webpage.

It is one of the most important CSS properties because it controls the layout behavior of elements. The supporting concepts are explained in Normal Flow and Flex Container.

Using the display property, you can:

Show elements as blocks
Display elements inline
Create flexible layouts
Hide elements completely

Understanding display is essential for building modern website layouts.

Syntax

CSS Display Syntax

css

selector {
    display: value;
}

PreviousNormal Flow NextCSS Position

div {
    display: inline;
}

Value	Description	Example
block	Displays element as a block-level element	display: block;
inline	Displays element as an inline element	display: inline;
inline-block	Displays inline but allows width and height	display: inline-block;
none	Hides the element completely	display: none;
flex	Creates a flexbox container	display: flex;
grid	Creates a grid container	display: grid;

CSS Display Complete Example

html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Display Example</title>
    <style>
        .block {
            display: block;
            background-color: lightblue;
            margin-bottom: 10px;
        }
        .inline {
            display: inline;
            background-color: lightgreen;
        }
        .inline-block {
            display: inline-block;
            width: 150px;
            height: 50px;
            background-color: orange;
        }
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div class="block">Block Element</div>
    <span class="inline">Inline Element 1</span>
    <span class="inline">Inline Element 2</span>
    <br><br>
    <div class="inline-block">Inline Block</div>
    <p class="hidden">This text is hidden.</p>
</body>
</html>

CSS Display

Syntax

Attributes

Example

Browser Support

Notes

Common Default Display Values

Conclusion

Element	Default Display
`<div>`	block
`<p>`	block
`<h1>` - `<h6>`	block
`<span>`	inline
`<a>`	inline
`<img>`	inline