CssConceptBeginner · 3 min read

What is Display Property in CSS: Simple Explanation and Examples

The display property in CSS controls how an element is shown on a web page, defining its box type and layout behavior. It can make elements behave like blocks, inline items, grids, or flex containers, affecting how they stack and flow.

⚙️

How It Works

Think of the display property as a way to tell the browser how to treat an element's box. Just like in real life where a box can be a container, a flat sheet, or a flexible bag, in CSS, display decides if an element takes up a full line, sits inline with text, or arranges its children in rows or columns.

For example, a block element acts like a full-width box stacking vertically, while an inline element flows like words in a sentence. Changing the display property changes this behavior, helping you control layout and spacing easily.

💻

Example

This example shows a div with display: block and a span with display: inline. Notice how the block element starts on a new line and the inline element stays within the line.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Property Example</title>
<style>
  .block-box {
    display: block;
    background-color: lightblue;
    padding: 10px;
    margin-bottom: 10px;
  }
  .inline-box {
    display: inline;
    background-color: lightgreen;
    padding: 10px;
  }
</style>
</head>
<body>
  <div class="block-box">I am a block element</div>
  <span class="inline-box">I am an inline element</span>
  <span class="inline-box">I am inline too</span>
</body>
</html>

Output

A light blue box spanning full width on its own line with text 'I am a block element'. Below it, two light green boxes with text 'I am an inline element' and 'I am inline too' appear side by side on the same line.

🎯

When to Use

Use the display property whenever you want to control how elements appear and behave in your layout. For example, use display: block for sections that should stack vertically, like paragraphs or div containers.

Use display: inline for small elements that flow with text, like links or buttons inside sentences. For modern layouts, display: flex or display: grid help arrange items in rows, columns, or complex grids easily.

Changing display can fix layout issues, create responsive designs, or customize how elements interact visually.

✅

Key Points

display controls element box type and layout behavior.
Common values: block, inline, flex, grid, none.
block elements start on new lines and take full width.
inline elements flow within text lines.
none hides elements completely from the page.

✅

Key Takeaways

The display property defines how an element is visually laid out on the page.

Block elements stack vertically and take full width, inline elements flow with text.

Use display values like flex or grid for advanced, flexible layouts.

Setting display to none hides the element from the page completely.

Changing display helps fix layout and design challenges easily.