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.

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>

Output

Browser Output

css

The block element will occupy the full available width
The inline elements will appear on the same line
The inline-block element will stay inline while supporting width and height
The hidden paragraph will not be visible

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Yes

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.

PreviousCSS Font Size NextCSS Position