element {
  display: value;
}

• Makes the element inline-level.

• It does not start on a new line and only takes up as much width as needed.

• Default for tags like <span>, <a> , and  <strong>.

<div>
  Lorem ipsum dolor sit amet.
  <span>This is an inline element</span> consectetur adipisicing elit.
</div>

<style>
  span {
    display: inline;
    background-color: #006100;
    color: white;
    padding: 5px;
  }
</style>

• Makes the element block-level.

• It starts on a new line and stretches to take up the full width of its container.

• Default for elements like <div>, <p>, <h1> etc.

<span>This is now a block element</span>

<style>
  span {
    display: block;
    background-color: #006100;
    color: white;
    padding: 10px;
  }
</style>

Output:

3. display: inline-block

• Combines the features of inline and block elements.

• The element flows inline with text but accepts width, height, and margin like a block element.

Example:

<span>Inline-block element</span>

<style>
  span {
    display: inline-block;
    width: 140px;
    height: 140px;
    background-color: #006100;
    color: white;
    padding: 10px;
    text-align: center;
  }
</style>

Output:

• Hides the element completely.

• The element does not take up any space in the layout.

• Commonly used for conditional visibility or toggling.

<span>This will be hidden</span>

<style>
  span {
    display: none;
  }
</style>