CSS Display

By /

In this chapter, you will learn about the display property in CSS. Every HTML element has a default way of appearing on a web page, and the display property allows you to change that behavior. Let’s understand the most commonly used CSS display values step by step.

What is the CSS Display Property?

The display property controls how an HTML element is displayed on a web page. Some elements, such as <div> and <p>, normally appear on a new line. Others, such as <span> and <a>, appear next to other content on the same line.

The most common display values are:

  • block
  • inline
  • inline-block
  • none

1. Display: Block

A block-level element takes up the full available width and starts on a new line.

For example:

span {
  display: block;
}

Even though a <span> is normally an inline element, this CSS makes it behave like a block element.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Display Block</title>

  <style>
    span {
      display: block;
      background-color: lightblue;
      margin: 10px;
    }
  </style>
</head>

<body>

  <span>First Span</span>
  <span>Second Span</span>
  <span>Third Span</span>

</body>
</html>

Each <span> will appear on a separate line.

Common block-level elements include:

  • <div>
  • <p>
  • <h1> to <h6>

2. Display: Inline

An inline element only takes up as much width as its content needs. It does not start on a new line. For example:

div {
  display: inline;
}

This makes a <div> behave like an inline element.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Display Inline</title>

  <style>
    div {
      display: inline;
      background-color: lightgreen;
    }
  </style>
</head>

<body>

  <div>HTML</div>
  <div>CSS</div>
  <div>JavaScript</div>

</body>
</html>

The three <div> elements will appear next to each other on the same line.

Common inline elements include:

  • <span>
  • <a>
  • <strong>
  • <em>

3. Display: Inline-Block

The inline-block value is a combination of inline and block. An element with display: inline-block:

  • Appears next to other elements on the same line.
  • Allows you to set its width and height.

For example:

div {
  display: inline-block;
  width: 150px;
  height: 100px;
}

Example

<!DOCTYPE html>
<html>
<head>
  <title>Display Inline Block</title>

  <style>
    .box {
      display: inline-block;
      width: 150px;
      height: 100px;
      background-color: lightblue;
      border: 2px solid blue;
      margin: 10px;
    }
  </style>
</head>

<body>

  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>

</body>
</html>

The boxes will appear next to each other, while still allowing you to control their width and height.

4. Display: None

The display: none property hides an element completely. For example:

p {
  display: none;
}

The paragraph will not appear on the page.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Display None</title>

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

<body>

  <h1>Learning CSS</h1>

  <p class="hidden">
    You cannot see this paragraph.
  </p>

  <p>This paragraph is visible.</p>

</body>
</html>

The hidden paragraph will not take up any space on the page.

Block vs Inline

The main difference is simple:

  • Block elements start on a new line and usually take the full available width.
  • Inline elements stay on the same line and only take up the space their content needs.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Block and Inline</title>

  <style>
    .block {
      display: block;
      background-color: lightblue;
      margin: 10px;
    }

    .inline {
      display: inline;
      background-color: lightgreen;
    }
  </style>
</head>

<body>

  <span class="block">Block Element 1</span>
  <span class="block">Block Element 2</span>

  <div class="inline">Inline Element 1</div>
  <div class="inline">Inline Element 2</div>

</body>
</html>

When you run this code, notice how the block elements appear on separate lines while the inline elements appear next to each other.

Quick Recap

  • The display property controls how an element appears on a page.
  • block makes an element start on a new line.
  • inline keeps an element on the same line.
  • inline-block allows elements to stay inline while using width and height.
  • none completely hides an element from the page.

Frequently Asked Questions (FAQs)

Q1. What is the CSS Display property?

The CSS display property controls how an HTML element appears and behaves on a web page.

Q2. What are the most common CSS display values?

The most commonly used display values are block, inline, inline-block, and none.

Q3. What is the difference between block and inline in CSS?

Block elements start on a new line and usually take the available width, while inline elements stay on the same line and only take up the space needed by their content.

Q4. Can I change a block element into an inline element?

Yes. The CSS display property can change how an element behaves, such as making a block element behave like an inline element.

Q5. Is the CSS display property important for beginners?

Yes. The CSS display property is an important concept because it helps beginners control how elements are placed and displayed when building web page layouts.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top