CSS Layout

CSS Display

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;
}

CSS Display Example

css

div {
    display: inline;
}

This makes the <div> behave like an inline element.

Attributes

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;

Example

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>

Browser Support

Feature	Chrome	Edge	Firefox	Safari
display	1	12	1	1

Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.

Notes

block elements start on a new line and occupy full width.
inline elements stay on the same line and ignore width and height properties.
inline-block combines features of both block and inline elements.
display: none; completely removes the element from the page layout.
Modern layouts commonly use flex and grid.

Common Default Display Values

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

Conclusion

The CSS Display property controls how elements are rendered and positioned on a webpage. Whether you need block-level elements, inline content, hidden elements, or advanced layouts using Flexbox and Grid, the display property is a fundamental tool in CSS layout design.

PreviousNormal Flow NextCSS Position