Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

CSS Layout

CSS Display

Written by Updated

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

ValueDescriptionExample
blockDisplays element as a block-level elementdisplay: block;
inlineDisplays element as an inline elementdisplay: inline;
inline-blockDisplays inline but allows width and heightdisplay: inline-block;
noneHides the element completelydisplay: none;
flexCreates a flexbox containerdisplay: flex;
gridCreates a grid containerdisplay: 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
display11211

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

ElementDefault 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 FlowNextCSS Position