CSS Display

The display property in CSS controls how elements appear and behave in the document layout. Whether something stacks vertically, flows inline, disappears completely, or lays out like a grid — display is what defines that behavior.

Let’s explore the most commonly used display values with fresh, unique examples.

Display Inline

This makes the element appear inline with the surrounding content — like words in a sentence.
You cannot apply width, height, or vertical margins to inline elements.
Great for text links or spans.
Only takes as much width as its content
No block-level spacing or resizing allowed

				
					span {
  display: inline;
}

Display Block

Block elements stretch the full width of the parent by default.
They start on a new line and stack vertically.
You can control size and spacing freely.
You can apply width, height, margin, and padding
Each block element breaks onto a new line

				
					div {
  display: block;
}

Display: Inline-block

Behaves like inline but also accepts width, height, padding, and margin.
Useful for layouts where items are side by side but need styling control.
Aligns inline with other elements
Allows full styling control

				
					button {
  display: inline-block;
}

Display None

This completely removes the element from the layout.
It’s as if the element doesn’t exist in the page.
Element becomes invisible and takes up no space

				
					.alert-message {
  display: none;
}

Visibility Hidden

This makes the element invisible, but it still takes up space in the layout.

				
					.alert-message {
  visibility: hidden;
}

Example

Here’s a fully working example using different display properties:

				
					<!DOCTYPE html>
<html>
<head>
  <title>CSS Display – Learn With Arshyan</title>
  <style>
    .container {
      background-color: #f3f3f3;
      padding: 15px;
      border: 1px solid #ccc;
    }

    .inline-item {
      display: inline;
      background-color: #d1c4e9;
      padding: 5px;
    }

    .block-item {
      display: block;
      background-color: #aed581;
      padding: 10px;
      margin-top: 10px;
    }

    .inline-block-item {
      display: inline-block;
      background-color: #ffcc80;
      width: 150px;
      padding: 10px;
      margin: 5px;
    }

    .hidden-item {
      display: none;
    }
  </style>
</head>
<body>

  <h2>Display Property Demo – Learn With Arshyan</h2>
  <div class="container">
    <span class="inline-item">Inline Element</span>
    <div class="block-item">Block Element</div>
    <div class="inline-block-item">Inline-Block 1</div>
    <div class="inline-block-item">Inline-Block 2</div>
    <p class="hidden-item">You can't see me! (display: none)</p>
  </div>

</body>
</html>

Final Tip – Learn With Arshyan

Choosing the right display value is the first step in building layouts. Master it, and you’ll control how your content flows, stacks, hides, or wraps.